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




twitter-bootstrap height (4)

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

.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>

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

मैं बूटस्ट्रैप 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 -->

मेरे मामले में काम करने के लिए इनमें से कोई भी सीएसएस विधियां नहीं मिली हैं, मैं अपने पैनलों में छवियों का उपयोग कर रहा हूं, इसके बजाय मैंने काम पूरा करने के लिए एक सरल 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 और फ्लेक्सबॉक्स) को कवर करता है। हालांकि, आपको इस विशेष कार्य के लिए उत्तरदायी बूटस्ट्रैप ग्रिड से दूर कदम उठाने की आवश्यकता हो सकती है।

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


यह फ़ंक्शन सबसे बड़ा .panel-body ऊंचाई पाता है, फिर यह मेरे सभी .panel-body तत्वों की ऊंचाई बनाता है।

function evenpanels() {
    var heights = [];                           // make an array
    $(".panel-body").each(function(){           // copy the height of each
        heights.push($(this).height());         //   element to the array
    });
    heights.sort(function(a, b){return b - a}); // sort the array high to low
    var minh = heights[0];                      // take the highest number    
    $(".panel-body").height(minh);              // and apply that to each element
}

अब जब सभी पैनल-बॉडी समान हैं, तो विंडो को "evenpanels" फ़ंक्शन को चलाने से पहले विंडो का आकार बदलने पर ऊंचाइयों को साफ़ करने की आवश्यकता होती है।

$(window).resize(function () { 
        $(".panel-body").each(function(){
            $(this).css('height',"");           // clear height values
        });                                     
        evenpanels();
});




panel