css - मैं बूटस्ट्रैप कॉलम को एक ही ऊंचाई कैसे बना सकता हूं?




twitter-bootstrap (20)

मैं बूटस्ट्रैप का उपयोग कर रहा हूँ। मैं तीन कॉलम को एक ही ऊंचाई कैसे बना सकता हूं?

यहां समस्या का एक स्क्रीनशॉट है। मैं नीले और लाल कॉलम पीले रंग के कॉलम के समान ऊंचाई होना चाहता हूं।

यहां कोड है:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
    <div class="col-xs-4 panel" style="background-color: red">
        some content
    </div>
    <div class="col-xs-4 panel" style="background-color: yellow">
        catz
        <img width="100" height="100" src="https://lorempixel.com/100/100/cats/">
    </div>
    <div class="col-xs-4 panel" style="background-color: blue">
        some more content
    </div>
</div>
</div>


2018 अपडेट करें

बूटस्टैप 3.x के लिए सर्वश्रेष्ठ दृष्टिकोण - सीएसएस फ्लेक्सबॉक्स का उपयोग करना (और न्यूनतम सीएसएस की आवश्यकता है) ..

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

बूटस्ट्रैप समान ऊंचाई flexbox उदाहरण

विशिष्ट ब्रेकपॉइंट्स (उत्तरदायी) पर केवल उसी ऊंचाई फ्लेक्सबॉक्स को लागू करने के लिए, मीडिया क्वेरी का उपयोग करें। उदाहरण के लिए, यहां sm (768px) और ऊपर है:

@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}

यह समाधान एकाधिक पंक्तियों (कॉलम रैपिंग) के लिए भी अच्छी तरह से काम करता है:
https://www.bootply.com/gCEXzPMehZ

अन्य कामकाज

इन विकल्पों की सिफारिश दूसरों द्वारा की जाएगी, लेकिन उत्तरदायी डिजाइन के लिए एक अच्छा विचार नहीं है । यह केवल एकल सिंगल पंक्ति लेआउट w / o कॉलम रैपिंग के लिए काम करता है।

1) भारी नकारात्मक मार्जिन और पैडिंग का उपयोग करना

2) display:table-cell का उपयोग करना display:table-cell (यह समाधान प्रतिक्रियाशील ग्रिड को भी प्रभावित करता है, इसलिए कॉलम स्टैक्स लंबवत होने से पहले @media क्वेरी का उपयोग केवल व्यापक स्क्रीन पर table डिस्प्ले को लागू करने के लिए किया जा सकता है)

बूटस्ट्रैप 4

फ्लेक्सबॉक्स अब बूटस्ट्रैप 4 में डिफ़ॉल्ट रूप से उपयोग किया जाता है, इसलिए अतिरिक्त सीएसएस कॉल करने के लिए अतिरिक्त सीएसएस की आवश्यकता नहीं है: http://www.codeply.com/go/IJYRI4LPwU


आप इनलाइन-फ्लेक्स का भी उपयोग कर सकते हैं जो बहुत अच्छा काम करता है और सीएसएस के साथ प्रत्येक पंक्ति तत्व को संशोधित करने से थोड़ा क्लीनर हो सकता है।

मेरी परियोजना के लिए मैं चाहता था कि हर पंक्ति जो बाल तत्वों की सीमाएं समान ऊंचाई हो, तो सीमाएं जंजीर लगती हैं। इसके लिए मैंने एक सरल सीएसएस वर्ग बनाया।

.row.borders{
    display: inline-flex;
    width: 100%;
}

उन लोगों के लिए जो त्वरित, आसान समाधान की तलाश में हैं - यदि आपके पास ब्लॉक सामग्री की तुलनात्मक रूप से लगातार सेट है जो कि div पर न्यूनतम ऊंचाई सेट करता है जो कि सबसे बड़ा ब्लॉक से थोड़ा बड़ा है, इसे कार्यान्वित करना आसान हो सकता है।

.align-box {
    min-height: 400px;
}

किसी के इच्छुक होने पर गाली jquery समाधान। बस सुनिश्चित करें कि आपके सभी कोल्स (एल) का एक सामान्य वर्गनाम है ... यदि आप इसे $ (विंडो) से जोड़ते हैं तो भी प्रतिक्रियात्मक रूप से काम करता है।

function equal_cols(el)
{
    var h = 0;
    $(el).each(function(){
        $(this).css({'height':'auto'});
        if($(this).outerHeight() > h)
        {
            h = $(this).outerHeight();
        }
    });
    $(el).each(function(){
        $(this).css({'height':h});
    });
}

प्रयोग

$(document).ready(function(){
   equal_cols('.selector');
});

नोट: यह पोस्ट @Chris 'टिप्पणी के अनुसार संपादित किया गया है कि कोड केवल $.each() फ़ंक्शन में अंतिम उच्चतम ऊंचाई निर्धारित किया गया था


पंक्तियों में केवल कॉलम पर इसे सेब करते समय समाधान 1 का उपयोग करने में कोई समस्या है। समाधान 1 में सुधार करना चाहते हैं।

 [class^="col-"]:not([class*="-12"]){
      margin-bottom: -99999px;
      padding-bottom: 99999px;
  }

(क्षमा करें, Popnoodles के एवर पर टिप्पणी नहीं कर सकता। मेरे पास पर्याप्त प्रतिष्ठा नहीं है)


पिछले कुछ जवाब बताते हैं कि div को समान ऊंचाई कैसे बनाना है, लेकिन समस्या यह है कि जब चौड़ाई बहुत संकीर्ण होती है तो divs ढेर नहीं होंगे, इसलिए आप अपने उत्तरों को एक अतिरिक्त भाग के साथ कार्यान्वित कर सकते हैं। प्रत्येक के लिए आप जिस पंक्ति वर्ग का उपयोग करते हैं, उसके अतिरिक्त आप यहां दिए गए सीएसएस नाम का उपयोग कर सकते हैं, इसलिए यदि आप हमेशा divs को एक दूसरे के बगल में रखना चाहते हैं तो div इस तरह दिखना चाहिए:

<div class="row row-eq-height-xs">Your Content Here</div>

सभी स्क्रीन के लिए:

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

जब आप sm का उपयोग करना चाहते हैं:

.row-eq-height-sm {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:768px) {
    .row-eq-height-sm {
        flex-direction: row;
    }
}

जब आप एमडी करना चाहते हैं:

.row-eq-height-md {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:992px) {
    .row-eq-height-md {
        flex-direction: row;
    }
}

जब आप एलजी का उपयोग करना चाहते हैं:

.row-eq-height-lg {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:1200px) {
    .row-eq-height-md {
        flex-direction: row;
    }
}

एक टिप्पणी के आधार पर संपादित करें , वास्तव में एक आसान समाधान है, लेकिन आपको सभी आकारों के लिए सबसे बड़ी वांछित चौड़ाई से कॉलम जानकारी देना सुनिश्चित करना होगा (उदाहरण के लिए <div class="col-md-3 col-sm-4 col-xs-12"> :

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

मैंने इस थ्रेड में और अन्य पृष्ठों पर किए गए सुझावों की बहुत कोशिश की लेकिन किसी भी समाधान ने प्रत्येक ब्राउज़र में 100% काम नहीं किया।

तो मैंने काफी समय प्रयोग किया और इसके साथ आया। केवल 1 वर्ग के साथ flexbox की मदद से बूटस्ट्रैप समान ऊंचाई कॉलम के लिए एक पूर्ण समाधान यह सभी प्रमुख ब्राउज़रों आईई 10 + में काम करता है।

सीएसएस:

.row.equal-cols {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.row.equal-cols:before,
.row.equal-cols:after {
  display: block;
}

.row.equal-cols > [class*='col-'] {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.row.equal-cols > [class*='col-'] > * {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; 
}

HTML:

<div class="container">
  <div class="row equal-cols">
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
  </div>
</div>

IE के और भी संस्करणों का समर्थन करने के लिए, उदाहरण के लिए, https://github.com/liabru/jquery-match-height उपयोग https://github.com/liabru/jquery-match-height और .equal-cols सभी बाल कॉलम को लक्षित https://github.com/liabru/jquery-match-height । इस कदर:

// Create a check for IE9 (or any other specific browser).
if(IE9) {
  $(".row.equal-cols > [class*='col-']").matchHeight();
}

इस पॉलीफिल के बिना कॉलम सामान्य बूटस्ट्रैप कॉलम के रूप में व्यवहार करेंगे, जो कि काफी अच्छा फॉलबैक है।


यदि आप किसी भी ब्राउज़र में यह काम करना चाहते हैं, तो जावास्क्रिप्ट का उपयोग करें:

$( document ).ready(function() {
    var heights = $(".panel").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".panel").height(maxHeight);
});

यहां मेरा समाधान है (संकलित सीएसएस):

.row.row-xs-eq {
  display: table;
  table-layout: fixed;
  margin: 0;
}

.row.row-xs-eq::before {
  content: none;
}

.row.row-xs-eq::after {
  content: none;
}

.row.row-xs-eq > [class^='col-'] {
  display: table-cell;
  float: none;
  padding: 0;
}

@media (min-width: 768px) {
  .row.row-sm-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-sm-eq::before {
    content: none;
  }

  .row.row-sm-eq::after {
    content: none;
  }

  .row.row-sm-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

@media (min-width: 992px) {
  .row.row-md-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-md-eq::before {
    content: none;
  }

  .row.row-md-eq::after {
    content: none;
  }

  .row.row-md-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

@media (min-width: 1200px) {
  .row.row-lg-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-lg-eq::before {
    content: none;
  }

  .row.row-lg-eq::after {
    content: none;
  }

  .row.row-lg-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

तो आपका कोड इस तरह दिखेगा:

<div class="row row-sm-eq">
  <!-- your old cols definition here -->
</div>

असल में यह वही सिस्टम है जिसका उपयोग आप .col-* वर्गों के साथ उस अंतर के साथ करते हैं, आपको पंक्ति में स्वयं को .row-* कक्षाओं को लागू करने की आवश्यकता होती है।

.row-sm-eq स्क्रीन पर .row-sm-eq कॉलम के साथ रखा जाएगा। यदि आपको किसी भी स्क्रीन पर ढेर होने की आवश्यकता नहीं है तो आप .row-xs-eq उपयोग कर सकते हैं।

SASS संस्करण जो हम वास्तव में उपयोग करते हैं:

.row {
  @mixin row-eq-height {
    display: table;
    table-layout: fixed;
    margin: 0;

    &::before {
      content: none;
    }

    &::after {
      content: none;
    }

    > [class^='col-'] {
      display: table-cell;
      float: none;
      padding: 0;
    }
  }

  &.row-xs-eq {
    @include row-eq-height;
  }

  @media (min-width: $screen-sm-min) {
    &.row-sm-eq {
      @include row-eq-height;
    }
  }

  @media (min-width: $screen-md-min) {
    &.row-md-eq {
      @include row-eq-height;
    }
  }

  @media (min-width: $screen-lg-min) {
    &.row-lg-eq {
      @include row-eq-height;
    }
  }
}

लाइव डेमो

नोट: एक पंक्ति के अंदर .col-xs-12 और .col-xs-6 मिश्रण करना ठीक से काम नहीं करेगा।


यहां मेरी विधि है, मैंने मीडिया क्वेरी में कुछ बदलावों के साथ फ्लेक्स का उपयोग किया है।

  @media (min-width: 0px) and (max-width: 767px) {
  .fsi-row-xs-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .fsi-row-sm-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .fsi-row-md-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 1200px) {
  .fsi-row-lg-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

फिर कक्षाओं को माता-पिता को जोड़ा जो आवश्यक थे।

<div class="row fsi-row-lg-level fsi-row-md-level">
<div class="col-sm-4">column 1</div>
<div class="col-sm-4">column 2</div>
<div class="col-sm-4">column 3</div>
</div>

मैं उत्तरदायी ब्रेकपॉइंट्स का उपयोग कर रहा हूं क्योंकि प्रवाह आमतौर पर बूटस्ट्रैप मानक उत्तरदायी प्रकृति को प्रभावित करता है।


अपने प्रश्न का उत्तर देने के लिए आपको example ज़रूरत है:

/* Using col-xs media query breakpoint but you can change 481 to 768 to only apply to col-sm and above if you'd like*/

@media only screen and (min-width : 481px) {
    .flex-row {
        display: flex;
        flex-wrap: wrap;
    }
    .flex-row > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }
    .flex-row.row:after, 
    .flex-row.row:before {
        display: flex;
    }
}

ऊपर स्क्रीनशॉट जैसे फ्लेक्स कॉलम के भीतर थंबनेल सामग्री फ्लेक्स के लिए समर्थन जोड़ने के लिए यह भी जोड़ें ... ध्यान दें कि आप इसे पैनलों के साथ भी कर सकते हैं:

.flex-row .thumbnail,
.flex-row .caption {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}
.flex-text {
    flex-grow: 1;
}    
.flex-row img {
    width: 100%;
}

जबकि फ्लेक्सबॉक्स IE9 में काम नहीं करता है और नीचे आप पॉलीफिल के रूप में जावास्क्रिप्ट ग्रिड जैसे कुछ के साथ सशर्त टैग का उपयोग करके फ़ॉलबैक के साथ डेमो का उपयोग कर सकते हैं:

<!--[if lte IE 9]>

<![endif]-->

स्वीकृत उत्तर में अन्य दो उदाहरणों के लिए ... तालिका डेमो एक सभ्य विचार है लेकिन गलत लागू किया जा रहा है। बूटस्ट्रैप कॉलम कक्षाओं पर उस सीएसएस को लागू करना विशेष रूप से बिना किसी संदेह के ग्रिड ढांचे को तोड़ देगा। आपको एक और दो टेबल शैलियों के लिए एक कस्टम चयनकर्ता का उपयोग करना चाहिए [class*='col-'] चौड़ाई [class*='col-'] पर परिभाषित नहीं किया जाना चाहिए जिसमें परिभाषित चौड़ाई है। यदि आप समान ऊंचाई और समान चौड़ाई कॉलम चाहते हैं तो यह विधि केवल तभी उपयोग की जानी चाहिए। यह किसी अन्य लेआउट के लिए नहीं है और उत्तरदायी नहीं है। हालांकि मोबाइल डिस्प्ले पर हम इसे फॉलबैक कर सकते हैं ...

// HTML
<div class="table-row-equal">
<div class="thumbnail">
    Content...
</div>
<div class="thumbnail">
    Content...
</div>
</div>

//CSS
@media only screen and (min-width : 480px){
    .table-row-equal {
        display: table;
        width: 100%;
        table-layout: fixed;
        border-spacing: 30px 0px;
        word-wrap: break-word;
        border-spacing: 30px 0px;
    }
    .table-row-equal .thumbnail {
        float: none;
        display: table-cell;
        vertical-align: top;
        width: 1%;
    }
}

आखिरकार, स्वीकार किए गए उत्तर में पहला डेमो जो एक सच्चे लेआउट के संस्करण को लागू करता है, कुछ परिस्थितियों के लिए एक अच्छा विकल्प है, लेकिन बूटस्ट्रैप कॉलम के लिए उपयुक्त नहीं है। इसका कारण यह है कि सभी कॉलम कंटेनर ऊंचाई तक फैले हुए हैं। इसलिए यह प्रतिक्रिया भी तोड़ देगा क्योंकि कॉलम उनके आगे के तत्वों में विस्तार नहीं कर रहे हैं, लेकिन पूरे कंटेनर। यह विधि आपको पंक्तियों के लिए नीचे मार्जिन लागू करने की अनुमति नहीं देगी और एंकर टैग्स को स्क्रॉल करने जैसे अन्य मुद्दों का भी कारण बन जाएगी।

पूर्ण कोड के लिए कोडपेन देखें जो स्वचालित रूप से फ्लेक्सबॉक्स कोड को उपसर्ग करता है।


एचटीएमएल

<div class="container-fluid">
<div class="row-fluid">
<div class="span4 option2">
<p>left column </p>
<p>The first column has to be the longest The first column has to be the longes</p>
</div>

<div class="span4 option2">
<p>middle column</p>
</div>

<div class="span4 option2">
<p>right column </p>
<p>right column </p>
<p>right column </p>
<p>right column </p>
<p>right column </p>
</div>
</div>
</div>

सीएसएस

.option2 { background: red; border: black 1px solid; color: white; }

जे एस

$('.option2').css({
    'height': $('.option2').height()
});

I searched for a solution to the same problem, and found one just worked !! - with almost no extra code..

see https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27 for a good disuccuion, and with the resposne you want in the bottom, with a link.

https://www.codeply.com/go/EskIjvun4B

this was the correct responsive way to for me... a quote: ... 3 — Use flexbox (best!)

As of 2017, the best (and easiest) way to make equal height columns in a responsive design is using CSS3 flexbox.

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

and simply use:

div class="container">
   <div class="row display-flex .... etc..

I use this super easy solution with clearfix , which doesn't have any side effects.

Here is an example on AngularJS:

<div ng-repeat-start="item in list">
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
</div>
<div ng-repeat-end>
    <div ng-if="$index % 3 == 2" class="clearfix visible-lg"></div>
    <div ng-if="$index % 2 == 1" class="clearfix visible-md"></div>
</div>

And one more example on PHP:

<?php foreach ($list as $i => $item): ?>
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
    <div class="clearfix visible-md"></div>
    <?php if ($i % 2 === 1): ?>
        <div class="clearfix visible-lg"></div>
    <?php endif; ?>
<?php endforeach; ?>

Just checking through bootstrap documentation and I found the simple solution for the problem of column same height.

Add the extra clearfix for only the required viewport

<div class="clearfix visible-xs-block"></div>

उदाहरण के लिए:

<div class="col-md-3 col-xs-6">This is a long text</div>
<div class="col-md-3 col-xs-6">This is short</div>
<div class="clearfix visible-xs-block">This is a long text</div>
<div class="col-md-3 col-xs-6">Short</div>
<div class="col-md-3 col-xs-6">Long Text</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-md-3 col-xs-6">Longer text which will push down</div>
<div class="col-md-3 col-xs-6">Short</div>

Please refer to http://getbootstrap.com/css/#grid-responsive-resets


Thought I'd just add that the answer given by Dr.Flink can also be applied to a Bootstrap 3 form-horizontal block - which can be very handy if you want to use background colours for each cell. In order for this to work for bootstrap forms, you would need to wrap the form contents which just serves to replicate a table-like structure.

The example below also provides the CSS which demonstrates an additional media query allows Bootstrap 3 to simply takeover and do it's normal thing on the smaller screen(s). This also works in IE8+ .

उदाहरण:

<form class="form-horizontal" role="form">

  <div class="form-wrapper">
    <div class="form-group">
      <label class="col-xs-12 col-sm-2 control-label">My Label</label>
      <div class="col-xs-12 col-sm-10">
        Some content
      </div>
    </div>
  </div>

</form>
.form-wrapper {
  display: table;
}

.form-wrapper .form-group {
  display: table-row;
}

.form-wrapper .form-group .control-label {
  display: table-cell;
  float: none;
}

.form-wrapper .form-group label + div {
  display: table-cell;
  float: none;
}

@media (max-width: 768px) {
  .form-wrapper {
    display: inherit;
  }
  .form-wrapper .form-group {
    display: block;
  }
  .form-wrapper .form-group .control-label {
    display: inherit;
  }
  .form-wrapper .form-group label + div {
    display: inherit;
  }
}

You can use below code

var heights = $(".row > div").map(function() {
    return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(".row > div").height(maxHeight);

You can wrap the columns inside a div

<div class="row">
<div class="col-md-12>
  <div class="col-xs-12 col-sm-4 panel" style="background-color: red">
  some content
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
  kittenz
  <img src="http://placekitten.com/100/100">
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
  some more content
  </div>
</div>
</div>

.row.container-height {
	overflow: hidden; 
}

.row.container-height > [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

जहां। कंटेनर-ऊंचाई शैली वर्ग है जिसे एक .row स्टाइल तत्व में जोड़ा जाना है जिसमें उसके सभी .col * बच्चों की ऊंचाई समान है।

इन शैलियों को केवल कुछ विशिष्ट .row (उदाहरण के रूप में। कंटेनर-ऊंचाई के साथ) पर लागू करना भी सभी को .col * पर मार्जिन और पैडिंग ओवरफ़्लो लागू करने से बचाता है।








twitter-bootstrap