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

Question

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

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

यहाँ कोड है:

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

Comments

stackoverflow.com/questions/24745966/…

— trante

बूटस्ट्रैप वेबसाइट में 5-लाइनों के समाधान getbootstrap.com.vn/examples/equal-height-columns

— Eduard Gamonal

बूटस्ट्रैप पर उदाहरण जवाबदेही एडुआर्ड को तोड़ता है। फ्लेक्स .rowगायब है flex-wrap: wrap;। यहाँ इसका एक जवाबदेही के साथ काम करना है: codepen.io/bootstrapped/details/RrabNe

— ब्रायन विलिस

संभावित वर्कअराउंड - अन्य कॉलम में एक पारदर्शी छवि 1 पिक्सेल चौड़ी। यह नई एक पिक्सेल चौड़ाई वाली छवि उपरोक्त उदाहरण में बिल्लियों की तस्वीर की पिक्सेल ऊंचाई से मेल खाती है। (आपकी स्थिति में काम नहीं किया जा सकता है या व्यावहारिक नहीं हो सकता है)

— Sql Surfer

बूटस्ट्रैप 4 में, हम उसी के लिए कार्ड का उपयोग कर सकते हैं

— अमजद रहमान ए

Answer 1

समाधान 4 बूटस्ट्रैप 4 का उपयोग कर

बूटस्ट्रैप 4 फ्लेक्सबॉक्स का उपयोग करता है इसलिए अतिरिक्त सीएसएस की कोई आवश्यकता नहीं है।

डेमो

<div class="container">
    <div class="row ">
        <div class="col-md-4" style="background-color: red">
          some content
        </div>
        <div class="col-md-4" style="background-color: yellow">
          catz
          <img width="100" height="100" src="https://placekitten.com/100/100/">
        </div>
        <div class="col-md-4" style="background-color: green">
          some more content
        </div>
    </div>
</div>

नकारात्मक मार्जिन का उपयोग कर समाधान 1 (जवाबदेही को नहीं तोड़ता)

डेमो

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

समाधान 2 तालिका का उपयोग कर

डेमो

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

फ्लेक्स का उपयोग कर समाधान 3 अगस्त 2012 को जोड़ा गया। इससे पहले पोस्ट की गई टिप्पणियां इस समाधान पर लागू नहीं होती हैं।

डेमो

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

Comments

इसे ऐसे समझिए कि स्तम्भ को नकारात्मक स्थान पर चूसा जा रहा है। यदि आप अतिप्रवाह हटाते हैं तो आप देखेंगे कि क्या चल रहा है।

— पोपनूडल्स

यदि बूटस्ट्रैप कॉलम वर्ग को विशेष रूप से लक्षित किया जाए तो आपको वाइल्डकार्ड * के बजाय एंकर ^ का उपयोग करना चाहिए। ^ का उपयोग करते हुए कहेंगे कि वर्ग को कोलो के साथ शुरू करना चाहिए - जहां दिखाए गए वाइल्डकार्ड किसी भी वर्ग को कोल के साथ मेल खाएंगे- कहीं भी, स्ट्रिंग में संभवत: उन शैलियों पर अवांछित प्रभाव पड़ेंगे जहां आपने सम्मेलन का उपयोग किया होगा- (यानी सामान-कोल-मॉर्स्टफ)।

— लोगन जी।

कुछ जवाबों के साथ, अच्छा जवाब। समाधान 1 फ्लोट को अक्षम करता है और इसलिए बूटस्ट्रैप ग्रिड उत्तरदायी व्यवहार को तोड़ता है। समाधान 2 (अधिक से अधिक गहराई में स्थिति में समझाया गया है। net/articles/onetruelayout/equalheight) नीचे की सीमा नहीं दिखाता है (क्योंकि यह पैडिंग स्पेस में कहीं क्लिप किया गया है)।

— ओहद श्नाइडर

समाधान 3 पंक्ति जवाबदेही को तोड़ता है।

— SPRBRN

@Popnoodles आपको flex-wrap: wrap;जवाबदेही को सक्षम करने के लिए तीसरे उदाहरण में जोड़ना चाहिए । आप डिस्प्ले भी जोड़ना चाहेंगे: फ्लेक्स; फ्लेक्स-दिशा: कॉलम; स्तंभ वर्ग के लिए। यदि आप .row का उपयोग करने जा रहे हैं और कस्टम क्लास नहीं, तो आपको पुराने उपयोगकर्ताओं को डिस्प्ले फ्लेक्स को वापस बदलने के लिए एक कमबैक प्रदान करना होगा। यहाँ एक उदाहरण है

— ब्रायन विलिस

Answer 2

अद्यतन 2020

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

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

बूटस्ट्रैप समान ऊंचाई फ्लेक्सबॉक्स उदाहरण

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

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

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

अन्य workarounds के

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

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

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

---

बूटस्ट्रैप ४

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

उदाहरण:

<div class="container">
    <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
</div>

Comments

आप केवल बड़े / व्यापक उपकरणों पर फ्लेक्सबॉक्स लगाने के लिए मीडिया-क्वेरी का उपयोग कर सकते हैं। मैंने बूटप्ले को अद्यतन किया: bootply.com/Cn6fA6LuTq

— Zim

यदि किसी को दिलचस्पी है, तो मैंने फ्लेक्सबॉक्स का उपयोग करके एक फॉर्म पर समान प्रभाव प्रदर्शित करने के लिए एक पेन बनाया है ।

— जस्टिन लाउ

यह flexbox के साथ एक ज्ञात सफारी बग है: प्रमाण: bugs.webkit.org/show_bug.cgi?id=137730

— Zim

@Stanley के बारे में टिप्पणी "अब उत्तरदायी नहीं" पुरानी और अप्रासंगिक है।

— ज़िम

यह एकमात्र फिक्स है जिसने मेरे लिए काम किया। धन्यवाद Zim यह बहुत अच्छा है!

— रयान एनजेड

Answer 3

कोई जावास्क्रिप्ट की जरूरत है। बस .row-eq-heightअपने मौजूदा वर्ग को .rowइस तरह जोड़ें :

<div class="row row-eq-height">
  <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>

युक्ति: यदि आपकी पंक्ति में 12 से अधिक कॉलम हैं, तो बूटस्ट्रैप ग्रिड इसे लपेटने में विफल रहेगा। इसलिए div.row.row-eq-heightप्रत्येक 12 कॉलम में एक नया जोड़ें ।

युक्ति: आपको जोड़ने की आवश्यकता हो सकती है

<link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css" />

अपने html के लिए

Comments

flexbox आधारित। IE8 या 9 में काम नहीं करता है, न ही एंड्रॉइड 2.x caniuse.com/#feat=flexbox

— क्रिस मोसचिनी

नोट: getbootstrap.vn "बूटस्ट्रैप" नहीं है। यह एक 3 पार्टी प्रोजेक्ट है।

— Zim

ऐसा लगता है कि बूटस्ट्रैप v4 में एकीकृत किया गया है।

— सिरिल डचोन-डोरिस

मैंने सही CSS (.vn साइट से) शामिल किया था लेकिन यह सब कुछ गड़बड़ कर देता है। यह फ्लेक्स पर आधारित है

— ekkis

महान ... प्लगइन नरक।

— अरमाडा

Answer 4

अपने प्रश्न का उत्तर देने के लिए आपको उपसर्ग css के साथ पूर्ण उत्तरदायी डेमो देखना होगा :

/* 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%;
}

---

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

<!--[if lte IE 9]>

<![endif]-->

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

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

@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;
    }
    .table-row-equal .thumbnail {
        float: none;
        display: table-cell;
        vertical-align: top;
        width: 1%;
    }
}

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

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

Comments

यह केवल एक ही उत्तर है जो वास्तव में मेरे लिए काम करता है। 3 टॉप रेटेड जवाब सिर्फ समय की बर्बादी थे

— ken2k

अच्छा लग रहा है, लेकिन दुर्भाग्य से

— मैकओएस

@ यहाँ जाँच ठीक है। जहाँ तक मुझे पता है कि यह सभी फ्लेक्सबॉक्स समर्थित ब्राउज़रों में काम करता है। कृपया मुझे बताएं कि क्या मैं गलत हूं। s.codepen.io/bootstrapped/debug/pboJNd । समस्या को row:after, row:beforeप्रदर्शन के साथ करना था : तालिका सेट जो स्पष्ट रूप से सफारी पसंद नहीं करता है।

— ब्रायन विलिस

बस एक सिर है कि यह वास्तव में iPad के सफ़ारी ब्राउज़र पर बुरी तरह से टूट जाता है

— मैथ्यू लॉक

यह सुनकर क्षमा करें @MatthewLock मैंने अभी अपने आईपैड एयर आईओएस 8.1 पर नवीनतम सफारी के साथ परीक्षण किया और यह उसी पर काम करता है। मैं भी सफारी 7 के साथ iPad मिनी रेटिना का उपयोग करके crossbrowsertesting.com पर परीक्षण करने में सक्षम था और यह भी ठीक काम करने लगता है। यहाँ उस परीक्षण के परिणाम हैं । क्या आप उपयोग कर रहे iPad और Safari संस्करण प्रदान कर सकते हैं? मुझे यह निश्चित करने की कोशिश करना पसंद है या कम से कम उत्तर में एक टिप्पणी डालनी चाहिए क्योंकि मुझे पता है कि बहुत से लोग इसका उपयोग कर रहे हैं।

— ब्रायन विलिस

Answer 5

आप केवल एक पंक्ति दिखाते हैं, इसलिए आपका उपयोग मामला केवल उसी तक सीमित हो सकता है। बस अगर आपके पास कई पंक्तियाँ हैं, तो यह प्लगइन - जीथब जावास्क्रिप्ट - ग्रिड - पूरी तरह से काम करता है! यह प्रत्येक पैनल को सबसे ऊंचे पैनल तक विस्तारित करता है, प्रत्येक पंक्ति को संभवतः उस पंक्ति के सबसे ऊंचे पैनल के आधार पर एक अलग ऊंचाई देता है। यह एक jquery समाधान बनाम सीएसएस है, लेकिन इसे वैकल्पिक दृष्टिकोण के रूप में सिफारिश करना चाहता था।

Comments

एकमात्र समाधान जो वास्तव में काम करता है और यह जवाबदेही को नहीं तोड़ता

— Artur Kzdzior

क्या यह आपको यह निर्दिष्ट करने की अनुमति देता है कि कॉलम चौकोर होना चाहिए - या सिर्फ सभी समान ऊंचाई?

— निको

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

— GlobalSchmidt

Answer 6

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

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

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

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

Comments

एक div class = "row" है जिसमें प्रत्येक "class-col-md-4" पैनलों की चर संख्या है, जो मुझे 3 कॉलम और अज्ञात संख्या पंक्तियों की संख्या के आधार पर देनी चाहिए, जो मैं सूचीबद्ध करना चाहता हूं। इस जेएस ने काम किया और मुझे अपने HTML / CSS में न्यूनतम बदलाव की आवश्यकता है, जैसा कि विभिन्न सीएसएस चीज़ों के विपरीत मैंने कोशिश की। केवल एक चीज जो मैंने बदली, वह थी अपने सभी कॉलम पैनल को अतिरिक्त कक्षा के साथ चिह्नित करना, अर्थात "समान-ऊँचाई-पैनल" और फिर $ ("। पैनल") के बजाय $ ("। ऊँचाई-पैनल") का उपयोग करें

— nidalpres

एकमात्र समाधान जिसने सीएसएस सामान के साथ प्रयोग करने के एक दिन बाद मेरे लिए काम किया।

— डायनोसोरियस

यह एक अच्छा समाधान है, लेकिन .ready()इसे कॉल करने का सही समय नहीं है - इसे कॉल किया जाना चाहिए.load()

— jave.web

@ jave.web अगर आपको लगता है कि यह एक अच्छा उपाय है, तो कृपया इसे एक अंगूठा दें। धन्यवाद

— paulalexandru

window.onload = function() {...function content above...}इसके बजाय उपयोग करें । यह बेहतर काम करता है।

— ब्लैकपैंथर 0001

Answer 7

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

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

सीएसएस:

.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 का उपयोग करें और सभी चाइल्ड कॉलम को लक्षित करें.equal-cols । ऐशे ही:

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

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

Comments

इसने मेरे लिए शानदार काम किया। धन्यवाद!

— रैंडलेट

Answer 8

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

अपने प्रोजेक्ट के लिए मैं चाहता था कि हर पंक्ति में बच्चे के तत्वों की सीमाएँ समान ऊँचाई की हों ताकि सीमाएँ दांतेदार दिखें। इसके लिए मैंने एक साधारण सीएसएस क्लास बनाई।

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

Comments

जबकि यह पंक्ति की सभी सामग्रियों को समान ऊंचाई पर बनाने में सफल होता है; इससे बूटस्ट्रैप की जवाबदेही टूट जाती है।

— क्रिस्टीन

Answer 9

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

से:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

Comments

अब तक का सबसे अच्छा तरीका।

— विवेक्स

Answer 10

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

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');
});

---

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

Comments

यह समझा जाता है - एक पंक्ति में एक निश्चित संख्या में कॉलम होने की आवश्यकता के बिना सरल और छोटा अभी तक सभी कॉलमों का आकार बदल देगा। अच्छा है!

— जोर्डन

यह काम नहीं कर रहा है, क्योंकि आपने प्रत्येक फ़ंक्शन में अंतिम सबसे बड़ी ऊंचाई निर्धारित की है। यदि तीसरा स्तंभ उच्चतम स्तंभ है, तो स्तंभ 1 और 2 को सही ऊँचाई नहीं मिल रही है .. आपको अंतिम पंक्ति "(यह) .css ({'ऊँचाई': h}) सेट करनी होगी;" प्रत्येक फ़ंक्शन के बाद। मैं एक संपादन करूंगा।

— क्रिस

Answer 11

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

<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;
    }
}

जब आप md चाहते हैं:

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

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

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

EDIT एक टिप्पणी के आधार पर, वास्तव में एक सरल समाधान है, लेकिन आपको सभी आकारों के लिए xs (जैसे <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;
}

Comments

आपने इसे बहुत अधिक जटिल बना दिया है जो आपको जरूरत से ज्यादा :) `बस उपयोग करें flex-wrap: wrap;फिर आपको सभी अलग-अलग की आवश्यकता नहीं है ... जब तक आप विशेष रूप से उन्हें नहीं चाहते।

— ब्रायन विलिस

यह iPad सफारी पर विफल रहता है

— मैथ्यू लॉक

Answer 12

मुझे आश्चर्य है कि मैं 2018 के अंत में यहां एक सार्थक समाधान नहीं पा सका। मैंने आगे बढ़कर फ्लेक्सबॉक्स का उपयोग करके इसे बूटस्ट्रैप 3 समाधान का पता लगाया।

स्वच्छ और सरल उदाहरण:

एचटीएमएल

<div class="row row-equal">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <p>Text</p>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <img src="//placehold.it/200x200">
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <p>Text</p>
    </div>  
</div>

सीएसएस

img {
  width: 100%;
}
p {
  padding: 2em;
}
@media (min-width: 768px) {
  .row-equal {
    display: flex;
    flex-wrap: wrap;
  }
  .col-equal {
    margin: auto;
  }
}

कार्यशील डेमो देखें: http://jsfiddle.net/5kmtfrny/

Answer 13

मुझे पता है कि मुझे बहुत देर हो चुकी है लेकिन अब आप अपने उद्देश्य को प्राप्त करने के लिए "न्यूनतम ऊंचाई" शैली की विशेषता का उपयोग कर सकते हैं।

Answer 14

यदि कोई बूटस्ट्रैप 4 का उपयोग कर रहा है और समान ऊँचाई वाले स्तंभों की तलाश कर रहा है, तो बस row-eq-heightपैरेंट डिव का उपयोग करें

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-eq-height">
  <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4</div>
  <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4<br>this is<br>a much<br>taller<br>column<br>than the others</div>
  <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4</div>
</div>

संदर्भ: http://getbootstrap.com.vn/examples/equal-height-columns/

Answer 15

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

.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स्तंभों के साथ XS स्क्रीन पर स्टैक किया जाएगा। यदि आपको किसी भी स्क्रीन पर स्टैक करने की आवश्यकता नहीं है, जिसका आप उपयोग कर सकते हैं .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अंदर ठीक से काम नहीं करेगा।

Comments

यह अच्छा है। मेरा समाधान एक ही है। और मानक बूटस्ट्रैप के 30 स्तंभों border-spacingऔर नकारात्मक मार्जिन के बीच मानक बूटस्ट्रैप के बराबर ऊंचाई वाले स्तंभ होने की संभावना है ।

— अधिकतम

Answer 16

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

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

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

Answer 17

सबसे अच्छा वहाँ:

जीथब रिफ्लेक्स - डॉक्स

बूटस्ट्रैप के साथ काम करता है

अपडेट करें:

1. सीएसएस को शामिल करें
2. अपना कोड अपडेट करें:

/*!
 *
 * Reflex v1.0
 *
 * Reflex is a flexbox grid which provides a way to take advantage of emerging
 * flexbox support while providing a fall back to inline-block on older browsers
 *
 * Built by Lee Jordan G.C.S.E.
 * email: [e-mail]
 * github: https://github.com/leejordan
 *
 * Structure and calculations are inspired by twitter bootstrap
 *
 */
.reflex-order-12 {
  -webkit-order: 12;
  -ms-flex-order: 12;
  order: 12;
}
.reflex-order-11 {
  -webkit-order: 11;
  -ms-flex-order: 11;
  order: 11;
}
.reflex-order-10 {
  -webkit-order: 10;
  -ms-flex-order: 10;
  order: 10;
}
.reflex-order-9 {
  -webkit-order: 9;
  -ms-flex-order: 9;
  order: 9;
}
.reflex-order-8 {
  -webkit-order: 8;
  -ms-flex-order: 8;
  order: 8;
}
.reflex-order-7 {
  -webkit-order: 7;
  -ms-flex-order: 7;
  order: 7;
}
.reflex-order-6 {
  -webkit-order: 6;
  -ms-flex-order: 6;
  order: 6;
}
.reflex-order-5 {
  -webkit-order: 5;
  -ms-flex-order: 5;
  order: 5;
}
.reflex-order-4 {
  -webkit-order: 4;
  -ms-flex-order: 4;
  order: 4;
}
.reflex-order-3 {
  -webkit-order: 3;
  -ms-flex-order: 3;
  order: 3;
}
.reflex-order-2 {
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
}
.reflex-order-1 {
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}
.reflex-order-0 {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
}
.reflex-container {
  display: inline-block;
  display: -webkit-flex;
  display: flex;
  zoom: 1;
  *display: inline;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  letter-spacing: -0.31em;
  *letter-spacing: normal;
  word-spacing: -0.43em;
  list-style-type: none;
}
.reflex-container *,
.reflex-container:before,
.reflex-container:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 100%;
  letter-spacing: normal;
  word-spacing: normal;
  white-space: normal;
}
.reflex-container *:before,
.reflex-container *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
[class*="reflex-col-"] {
  width: 100%;
  vertical-align: top;
  position: relative;
  display: inline-block;
  display: -webkit-flex;
  display: flex;
  zoom: 1;
  *display: inline;
  text-align: left;
  text-align: start;
}
.reflex-item {
  display: block;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
}
_:-ms-fullscreen,
:root .reflex-item {
  width: 100%;
}
.reflex-col-12 {
  width: 100%;
  *width: 99.9%;
}
.reflex-col-11 {
  width: 91.66666666666666%;
  *width: 91.56666666666666%;
}
.reflex-col-10 {
  width: 83.33333333333334%;
  *width: 83.23333333333335%;
}
.reflex-col-9 {
  width: 75%;
  *width: 74.9%;
}
.reflex-col-8 {
  width: 66.66666666666666%;
  *width: 66.56666666666666%;
}
.reflex-col-7 {
  width: 58.333333333333336%;
  *width: 58.233333333333334%;
}
.reflex-col-6 {
  width: 50%;
  *width: 49.9%;
}
.reflex-col-5 {
  width: 41.66666666666667%;
  *width: 41.56666666666667%;
}
.reflex-col-4 {
  width: 33.33333333333333%;
  *width: 33.23333333333333%;
}
.reflex-col-3 {
  width: 25%;
  *width: 24.9%;
}
.reflex-col-2 {
  width: 16.666666666666664%;
  *width: 16.566666666666663%;
}
.reflex-col-1 {
  width: 8.333333333333332%;
  *width: 8.233333333333333%;
}
@media (min-width: 480px) {
  .reflex-col-xs-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-xs-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-xs-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-xs-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-xs-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-xs-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-xs-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-xs-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-xs-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-xs-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-xs-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-xs-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
@media (min-width: 768px) {
  .reflex-col-sm-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-sm-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-sm-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-sm-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-sm-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-sm-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-sm-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-sm-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-sm-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-sm-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-sm-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-sm-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
@media (min-width: 992px) {
  .reflex-col-md-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-md-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-md-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-md-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-md-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-md-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-md-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-md-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-md-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-md-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-md-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-md-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
@media (min-width: 1200px) {
  .reflex-col-lg-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-lg-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-lg-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-lg-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-lg-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-lg-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-lg-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-lg-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-lg-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-lg-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-lg-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-lg-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
.reflex-wrap {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.reflex-wrap-reverse {
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}
.reflex-direction-row-reverse {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.reflex-direction-column {
  -webkit-flex-direction: column;
  flex-direction: column;
}
.reflex-direction-column-reverse {
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
.reflex-align-start {
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
.reflex-align-end {
  -webkit-align-items: flex-end;
  align-items: flex-end;
}
.reflex-align-end [class*="reflex-col-"] {
  vertical-align: bottom;
}
.reflex-align-center {
  -webkit-align-items: center;
  align-items: center;
}
.reflex-align-center [class*="reflex-col-"] {
  vertical-align: middle;
}
.reflex-align-baseline {
  -webkit-align-items: baseline;
  align-items: baseline;
}
.reflex-align-baseline [class*="reflex-col-"] {
  vertical-align: baseline;
}
.reflex-align-content-start {
  -webkit-align-content: flex-start;
  align-content: flex-start;
}
.reflex-align-content-end {
  -webkit-align-content: flex-end;
  align-content: flex-end;
}
.reflex-align-content-end [class*="reflex-col-"] {
  vertical-align: bottom;
}
.reflex-align-content-center {
  -webkit-align-content: center;
  align-content: center;
}
.reflex-align-content-space-between {
  -webkit-align-content: space-between;
  align-content: space-between;
}
.reflex-align-content-space-around {
  -webkit-align-content: space-around;
  align-content: space-around;
}
.reflex-align-self-stretch {
  -webkit-align-self: stretch;
  align-self: stretch;
}
.reflex-align-self-start {
  -webkit-align-self: flex-start;
  align-self: flex-start;
}
.reflex-align-self-end {
  -webkit-align-self: flex-end;
  align-self: flex-end;
  vertical-align: bottom;
}
.reflex-align-self-center {
  -webkit-align-self: center;
  align-self: center;
  vertical-align: middle;
}
.reflex-align-self-baseline {
  -webkit-align-self: baseline;
  align-self: baseline;
  vertical-align: baseline;
}
.reflex-justify-start {
  text-align: left;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
.reflex-justify-end {
  text-align: right;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.reflex-justify-center {
  text-align: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.reflex-justify-space-between {
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.reflex-justify-space-around {
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
.reflex-item-margin-sm {
  margin: 0 0.25em 0.5em;
}
.reflex-item-margin-md {
  margin: 0 0.5em 1em;
}
.reflex-item-margin-lg {
  margin: 0 1em 2em;
}
.reflex-item-content-margin-sm * {
  margin-right: 0.25em;
  margin-left: 0.25em;
}
.reflex-item-content-margin-md * {
  margin-right: 0.5em;
  margin-left: 0.25em;
}
.reflex-item-content-margin-lg * {
  margin-right: 1em;
  margin-left: 1em;
}
.reflex-img {
  display: inline-block;
  display: -webkit-flex;
  display: flex;
  zoom: 1;
  *display: inline;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
  width: 100%;
  height: auto;
}
.reflex-item-footer {
  margin-top: auto;
  margin-left: 0;
  margin-right: 0;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="reflex-container reflex-wrap">
  <div class="reflex-col-xs-12 reflex-col-sm-4 panel" style="background-color: red">
  some content
  </div>
  <div class="reflex-col-xs-6 reflex-col-sm-4 panel" style="background-color: yellow">
  kittenz
  <img src="http://upload.wikimedia.org/wikipedia/en/1/13/Matrona.jpg">
  </div>
  <div class="reflex-col-xs-6 reflex-col-sm-4 panel" style="background-color: blue">
  some more content
  </div>
</div>

Comments

ढेर अतिप्रवाह में आपका स्वागत है! हालांकि यह लिंक प्रश्न का उत्तर दे सकता है, लेकिन उत्तर के आवश्यक भागों को शामिल करना और संदर्भ के लिए लिंक प्रदान करना बेहतर है। लिंक-केवल उत्तर अमान्य हो सकते हैं यदि लिंक किए गए पृष्ठ बदल जाते हैं। देखिए मैं एक अच्छा जवाब कैसे लिखता हूं ।

— बट्टूमी

Answer 18

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

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

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

Answer 19

मैं के साथ इस सुपर आसान समाधान का उपयोग करें clearfix , जिसका कोई साइड इफेक्ट नहीं है।

यहाँ पर एक उदाहरण है 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>

और 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; ?>

Comments

यह आपके कॉलम को समान ऊंचाई नहीं बनाता है, हालाँकि।

— 14

मुझे पंक्ति में एक ही ऊंचाई / जगह पर कॉलम के लिए इच्छुक के लिए यह एक समाधान है

— मीकल - wereda शुद्ध

Answer 20

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

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

Answer 21

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

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

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

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

Answer 22

मैंने उसी समस्या का हल खोजा, और पाया बस एक काम किया !! - लगभग कोई अतिरिक्त कोड के साथ ..

अच्छे डिसकशन के लिए https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27 देखें , और रिस्पॉन्स के साथ आप नीचे एक लिंक के साथ चाहते हैं।

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

यह मेरे लिए सही उत्तरदायी तरीका था ... एक उद्धरण: ... 3 - फ्लेक्सबॉक्स (सर्वश्रेष्ठ!) का उपयोग करें

2017 तक, उत्तरदायी डिजाइन में समान ऊंचाई के कॉलम बनाने के लिए सबसे अच्छा (और सबसे आसान) तरीका CSS3 फ्लेक्सबॉक्स का उपयोग कर रहा है।

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

और बस उपयोग करें:

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

Answer 23

@media (min-width: @screen-sm-min) {
    div.equal-height-sm {
        display: table;


        > div[class^='col-'] {
            display: table-cell;
            float: none;
            vertical-align: top;
        }
    }
}

<div class="equal-height-sm">
    <div class="col-xs-12 col-sm-7">Test<br/>Test<br/>Test</div>
    <div class="col-xs-12 col-sm-5">Test</div>
</div>

उदाहरण:

https://jsfiddle.net/b9chris/njcnex83/embedded/result/

यहाँ कई उत्तरों से अनुकूलित। Flexbox- आधारित उत्तर सही तरीके से एक बार IE8 और 9 मर चुके हैं, और एक बार Android 2.x मर चुका है, लेकिन यह 2015 में सच नहीं है, और 2016 में होने की संभावना नहीं है। IE8 और 9 अभी भी 4- बनाये गए हैं 6% का उपयोग आप कैसे मापते हैं, और कई कॉर्पोरेट उपयोगकर्ताओं के आधार पर यह बहुत बुरा है।http://caniuse.com/#feat=flexbox

display: table, display: table-cellचाल और अधिक पीछे की ओर संगत है - और एक बड़ी बात यह केवल गंभीर संगतता मुद्दे को एक सफारी मुद्दा जहां यह बलों है box-sizing: border-box, कुछ पहले से ही अपने बूटस्ट्रैप टैग के लिए आवेदन किया। http://caniuse.com/#feat=css-table

आप स्पष्ट रूप से अधिक कक्षाएं जोड़ सकते हैं जो समान चीजें करते हैं, जैसे .equal-height-md । मैंने अपने विवश उपयोग में छोटे प्रदर्शन लाभ के लिए इन्हें divs से बांधा, लेकिन आप इसे बाकी बूटस्ट्रैप की तरह अधिक सामान्यीकृत करने के लिए टैग को हटा सकते हैं।

ध्यान दें कि यहाँ jsfiddle CSS का उपयोग करता है, और इसलिए, चीजें जो अन्यथा प्रदान करेगी, लिंक किए गए उदाहरण में हार्ड-कोडित हैं। उदाहरण के लिए @ स्क्रीन-स्म-मिन को लेस से डाला जाएगा - 768px।

Answer 24

यदि यह आपके संदर्भ में समझ में आता है, तो आप बस प्रत्येक ब्रेक के बाद एक खाली 12-कॉलम div जोड़ सकते हैं, जो एक विभक्त के रूप में कार्य करता है जो आपकी पंक्ति में सबसे लंबे सेल के नीचे गले लगाता है।

<div class="row">
   <div class="col-xs-6">Some content</div>
   <div class="col-xs-6">
      Lots of content! Lots of content! Lots of content! Lots of content! Lots of content! 
   </div>
   <div id="spacer-div" class="col-xs-12"></div>
   <div class="col-xs-6">More content...</div>
</div><!--this You forgot to close -->

उम्मीद है की यह मदद करेगा!

Comments

यह पूछे गए सवाल का जवाब नहीं देता है!

— एलिसन

Answer 25

सोचा था कि मैं अभी जोड़ूंगा कि Dr.Flink द्वारा दिए गए उत्तर को बूटस्ट्रैप 3 form-horizontalब्लॉक पर भी लागू किया जा सकता है - जो बहुत आसान हो सकता है यदि आप प्रत्येक सेल के लिए पृष्ठभूमि रंगों का उपयोग करना चाहते हैं। बूटस्ट्रैप रूपों के लिए काम करने के लिए, आपको फॉर्म सामग्री को लपेटने की आवश्यकता होगी जो सिर्फ टेबल जैसी संरचना को दोहराने का काम करती है।

नीचे दिया गया उदाहरण सीएसएस भी प्रदान करता है जो एक अतिरिक्त मीडिया क्वेरी को प्रदर्शित करता है बूटस्ट्रैप 3 को केवल अधिग्रहण करने की अनुमति देता है और छोटे स्क्रीन (ओं) पर यह सामान्य बात है। यह 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;
  }
}

Answer 26

फ्लेक्स-बॉक्स के माध्यम से ऐसा करने की कोशिश करें

.container {
	display: flex;
	padding-bottom: 50px;
}
.col {
	background: blue;
	padding: 30px;
}

.col.center {
	background: red;
	height: 100px;
	margin-bottom: -50px;
}

<div class="container">
  <div class="col">Left</div>
  <div class="col center">Center</div>
  <div class="col">Right</div>
</div>

लाइव JSField - https://jsfiddle.net/grinmax_/spsn4fnq/

Answer 27

तो हां, बूटस्ट्रैप 4 एक पंक्ति में सभी कॉल को समान ऊंचाई पर बनाता है, हालांकि यदि आप पंक्ति के अंदर सामग्री के चारों ओर एक सीमा बना रहे हैं, तो आप पा सकते हैं कि ऐसा प्रतीत होता है कि कॉल बराबर ऊंचाई नहीं हैं!

जब मैंने height: 100%कॉल के अंदर के तत्व पर लागू किया तो मैंने पाया कि मैंने अपना मार्जिन खो दिया है।

मेरा समाधान कॉल के डिव (आंतरिक तत्व पर एक मार्जिन के बजाय) पर पैडिंग का उपयोग करना है। इस तरह:

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
    </div>
</div>

उपरोक्त कोड उदाहरण बूटस्ट्रैप 4.1 का उपयोग सीमा के साथ नौ बक्से का एक सेट बनाने के लिए करता है

Answer 28

एचटीएमएल

<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()
});

Answer 29

2019/03/19

** बूटस्ट्रैप 4 समान ऊंचाई समाधान **

बराबर ऊंचाई के लिए बूटस्ट्रैप यूटिलिटीज / फ्लेक्स

कोडपेन में लाइव उदाहरण

पैरेंट डिव heightया नियत बूटस्ट्रैप क्लास द्वारा समान ऊँचाईmin-height

<div class="d-flex align-content-stretch flex-wrap" style="min-height: 200px">
    <div>Flex height test text for example , Flex height test text for example </div>
    <div>Flex item</div>
    <div>Flex item</div>
    <div>Flex item</div>
 </div>

.bd-highlight {
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.15);
}
.fixed-height-200 {
  min-height: 200px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<br><br><br>
<div class="d-flex align-content-stretch flex-wrap fixed-height-200">
    <div class="p-2 bd-highlight">Flex item <br> 1111111111</div>
    <div class="p-2 bd-highlight bg-danger">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight bg-info">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight bg-light">Flex item <br> 1111111111</div>
    <div class="p-2 bd-highlight">Flex item <br> 1111111111</div>
    <div class="p-2 bd-highlight">Flex item <br> 1111111111</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight bg-primary">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
</div>

Comments

आप मुझे नेगेटिव वोट क्यों देते हैं। क्या आप इसके लिए एक टिप्पणी कर सकते हैं?

— एमडी आशिक

Answer 30

आप एक 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>

Comments

कॉलम में से एक में बटन के साथ मेरे लिए काम नहीं किया।

— रे हंटर