css - ट्विटर बूटस्ट्रैप 3-एक द्रव पंक्ति में समान ऊंचाई के पैनल




twitter-bootstrap height panel (6)

यह सीएसएस flexbox के साथ किया जा सकता है। केवल न्यूनतम सीएसएस की आवश्यकता है ..

.equal {  
    display: -webkit-flex;
    display: flex;
}

बस अपने .row और। Flexbox में .row जोड़ें बाकी करता है।

http://www.codeply.com/go/BZA25rTY45

अद्यतन: बूटस्ट्रैप 4 फ्लेक्सबॉक्स का उपयोग करता है इसलिए अतिरिक्त सीएसएस की आवश्यकता नहीं है। http://www.codeply.com/go/0Aq0p6IcHs

मैं बूटस्ट्रैप 3 के लिए नया हूं और मैं अपने लैंडिंग पृष्ठ पर समान ऊंचाई के 3 पैनलों को रखना चाहता हूं, भले ही मध्य पैनल में कम सामग्री हो। आकार बदलने पर वे एक ही ऊंचाई बन जाते हैं, लेकिन पृष्ठ की आरंभिक यात्रा पर नहीं होते हैं।

मैंने पहले ही सीएसएस के साथ अतिप्रवाह छिपाने की कोशिश की है और यह पैनल के नीचे कटौती करता है जो मैं नहीं चाहता, इसलिए मुझे लगता है कि मुझे jQuery का उपयोग करने की आवश्यकता है।

मेरा कोड यहाँ है:

<div class="row-fluid">
  <!--begin panel 1 -->
  <div class="col-md-4">
    <div style="text-align:center" class="panel panel-primary">
      <div class="panel-heading">
        <h1 class="panel-title text-center">Web y Metrícas</h1>
      </div>
      <!-- end panel-heading -->
      <div class="panel-body">
        <p>
          <img style="margin: 0 auto;" class="img-responsive" src="web.png" height="30%" width="30%" alt="Web y Metrícas" />
        </p>
        <p class="text-left lead2">Apoyamos estratégicamente la presencia de tu empresa en el mundo digital, a través de la construcción de recursos web atractivos para tus clientes.</p>
        <ul class="text-left">
          <li>Web Corporativas</li>
          <li>Tiendas Virtuales</li>
          <li>Plataformas e-Learning</li>
          <li>Arquitectura de Información</li>
          <li>Google Analytics, SEO–SEM</li>
          <li>Análisis de Competencia Digital</li>
          <li>Data Mining</li>
        </ul> <a class="btn btn-primary" href="#">Ver más &raquo;</a>
      </div>
      <!-- end panel-body -->
    </div>
    <!-- end panel-primary -->
  </div>
  <!--end col-md-4 -->
  <!-- begin panel 2 -->
  <div class="col-md-4">
    <div style="text-align:center" class="panel panel-primary">
      <div class="panel-heading">
        <h1 class="panel-title">Gestíon de Redes Socials</h1>
      </div>
      <!-- end panel-heading -->
      <div class="panel-body">
        <p>
          <img style="margin: 0 auto;" class="img-responsive" src="redes.png" height="30%" width="30%" alt="Gestíon de Redes Socials" />
        </p>
        <p class="text-left lead2">Crear una experiencia de marca excepcional a través de redes es más inteligente, rápida y las comunicaciones sociales serán más eficientes.</p>
        <ul class="text-left">
          <li>Compromiso</li>
          <li>Publicación</li>
          <li>Monitoreo</li>
          <li>Analítica</li>
          <li>Colaboración</li>
          <li>CRM</li>
          <li>Movil</li>
        </ul> <a class="btn btn-primary" href="#">Ver más &raquo;</a>
      </div>
      <!-- end panel-body -->
    </div>
    <!-- end panel-primary -->
  </div>
  <!-- end col-md-4 -->
  <!--begin panel 3 -->
  <div class="col-md-4">
    <div style="text-align:center" class="panel panel-primary">
      <div class="panel-heading">
        <h1 class="panel-title">Plan de Medios</h1>
      </div>
      <!-- end panel-heading -->
      <div class="panel-body">
        <p>
          <img style="margin: 0 auto;" class="img-responsive" src="medios.png" height="30%" width="30%" alt="Plan de Medios" />
        </p>
        <p class="text-left lead2">Trabajamos en conjunto con la empresa para reforzar las fortalezas de su organización y las comunicamos de forma integral y con un mensaje claro.</p>
        <ul class="text-left">
          <li>Asesoría Comunicacional</li>
          <li>RR.PP</li>
          <li>Presencia de Marca</li>
          <li>Clipping Digital</li>
          <li>Manejo de Crisis</li>
          <li>Lobby</li>
          <li>Media Training</li>
        </ul> <a class="btn btn-primary" href="#">Ver más &raquo;</a>
      </div>
      <!-- end panel-body -->
    </div>
    <!-- end  panel-primary -->
  </div>
  <!-- end col-md-4 -->
</div>
<!-- end row -->

मैं निम्न <div> लिए शैली में शीर्ष और नीचे पैडिंग जोड़ता हूं।

<div class="xxx" style="padding: 8px 0px 8px 0px">
    ...
</div>

क्योंकि प्रत्येक मामले के बाद अलग है और आपको स्थिति के अनुसार समायोजित करना होगा।

क्रोम देव उपकरण इस तरह की स्थितियों में बहुत उपयोगी हो सकता है।


मेरे मामले में काम करने के लिए इनमें से कोई भी सीएसएस विधियां नहीं मिली हैं, मैं अपने पैनलों में छवियों का उपयोग कर रहा हूं, इसके बजाय मैंने काम पूरा करने के लिए एक सरल JQuery फ़ंक्शन का उपयोग किया

        window.onload = function resizePanel(){
            var h = $("#panel-2").height();
            $("#panel-1").height(h); // add a line like this for each panel you want to resize
        }

जहां पैनल टैग में ids "पैनल -1" और "पैनल -2" हैं, सबसे बड़ा पैनल चुनें जिसे आप एच सेट करने के लिए उपयोग करते हैं और आपके एचटीएमएल के अंत में फ़ंक्शन को कॉल करते हैं।

<body onresize = "resizePanel()">

मैं इसे भी बना देता हूं ताकि समारोह को तब कहा जा सके जब खिड़की पर ऑरेंजिज़ विशेषता जोड़कर विंडो का आकार बदल दिया जाता है


यदि आप बूटस्ट्रैप ग्रिड का उपयोग करने जा रहे हैं, तो मुझे नहीं लगता कि आपको निम्न सीएसएस की तरह हैक्स के बिना इसे पूरा करने का एक आसान तरीका मिल जाएगा।

यह मूल रूप से कहता है। जब md चौड़ाई बूटस्ट्रैप में md ब्रेकपॉइंट से अधिक होती है, तो panel-body क्लास के साथ सभी तत्व दें जो कॉलम तत्वों के प्रत्यक्ष वंशज हैं जो न्यूनतम 420px ऊंचाई है जो आपकी "मौजूदा" सामग्री होती है जो आपकी मौजूदा सामग्री के साथ काम करती है ।

दोबारा, मुझे लगता है कि यह वास्तव में सकल समाधान है , लेकिन यह एक चुटकी में "काम करता है"।

@media (min-width: 992px) {
  .col-md-4 > .panel > .panel-body {
    min-height: 420px;
  }
}

यहां एक सीएसएस-ट्रिक्स लेख है फ्लूइड चौड़ाई समान ऊंचाई कॉलम जो इसे पूरा करने के लिए विभिन्न तरीकों ( display: table और फ्लेक्सबॉक्स) को कवर करता है। हालांकि, आपको इस विशेष कार्य के लिए उत्तरदायी बूटस्ट्रैप ग्रिड से दूर कदम उठाने की आवश्यकता हो सकती है।

साथ ही, फ्लेक्सबॉक्स में पूर्ण मार्गदर्शिका यहां दी गई है


बूटस्ट्रैप का समाधान - इस सीएसएस को जोड़ें और कक्षा को अपनी पंक्ति में जोड़ें:

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

http://getbootstrap.com.vn/examples/equal-height-columns/ पर पोस्ट की गई कुछ कैविट्स हैं, लेकिन ऐसा लगता है कि यह आपके मामले के लिए पर्याप्त होगा।

मैंने यह जवाब here भी देखा।

कॉलम की गतिशील संख्या के लिए अद्यतन करें

बूटस्ट्रैप स्वचालित रूप से नई पंक्तियों में स्तंभों को लपेटता है जब आप एक पंक्ति में फिट होने से अधिक जोड़ते हैं, लेकिन यह फ्लेक्सबॉक्स दृष्टिकोण इसे तोड़ देता है। लपेटने के लिए फ्लेक्सबॉक्स प्राप्त करने के लिए, मैंने पाया है कि आप ऐसा कुछ कर सकते हैं:

-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-align-content: flex-end;
align-content: flex-end;

यह शानदार है जब आपके पास कॉलम की गतिशील संख्या होती है, या कॉलम जो स्क्रीन आकार के अनुसार चौड़ाई बदलते हैं। तो आप इस तरह कुछ कर सकते हैं:

<div class="row row-eq-height">
    <div class="col-sm-6 col-md-4">Content...</div>
    <div class="col-sm-6 col-md-4">Content...</div>
    <div class="col-sm-6 col-md-4">Content...</div>
    <div class="col-sm-6 col-md-4">Content...</div>
    <div class="col-sm-6 col-md-4">Content...</div>
</div>

और यह जिस तरह से अपेक्षित है, सभी लाइनें। बस देखें - यह केवल नए ब्राउज़र में काम करता है। यहां अधिक जानकारी


कॉलम केंद्रित करने की पसंदीदा विधि "ऑफसेट्स" का उपयोग करना है (यानी: col-md-offset-3 )

बूटस्ट्रैप 3.x केंद्रित उदाहरण

तत्वों को केंद्रित करने के लिए , एक center-block सहायक वर्ग है

आप text-center का उपयोग केंद्र टेक्स्ट (और इनलाइन तत्वों) में भी कर सकते हैं।

डेमो : http://bootply.com/91632

संपादित करें - टिप्पणियों में उल्लिखित अनुसार, center-block स्तंभ सामग्री और display:block पर काम करता है display:block तत्व, लेकिन कॉलम पर ही काम नहीं करेगा ( col-* divs) क्योंकि बूटस्ट्रैप float का उपयोग करता है।

2018 अपडेट करें

अब बूटस्ट्रैप 4 के साथ, केंद्रिंग विधियां बदल गई हैं ..

  • text-center अभी भी display:inline लिए उपयोग किया जाता है display:inline तत्व
  • mx-auto center-block को केंद्र display:block बदल देता center-block display:block तत्व
  • offset-* या mx-auto का उपयोग केंद्र ग्रिड कॉलम में किया जा सकता है

mx-auto (ऑटो एक्स-अक्ष मार्जिन) केंद्र display:block करेगा display:block या display:flex तत्व जिनकी परिभाषित चौड़ाई है , ( % , vw , px , आदि ..)। फ्लेक्सबॉक्स का उपयोग ग्रिड कॉलम पर डिफ़ॉल्ट रूप से किया जाता है , इसलिए विभिन्न फ्लेक्सबॉक्स केंद्रिंग विधियां भी होती हैं।

डेमो बूटस्ट्रैप 4 क्षैतिज केंद्र

बीएस 4 में लंबवत केंद्र के लिए https://.com/a/41464397/171456





css twitter-bootstrap height panel