बूटस्ट्रैप कॉलम

Question

मैं निम्न HTML कोड है:

<div class="container"> 
    <div class="row row1"> 
     <div class="col col1 col-md-3"> 
      Column 1 
     </div> 
     <div class="col col2 col-md-3"> 
      Column 2 
     </div> 
     <div class="col col3 col-md-3"> 
      <div class="row"> 
       Column 3 
      </div> 
      <div class="row"> 
       Column 4 
      </div> 
     </div> 
    </div> 

मैं बूटस्ट्रैप ग्रिड लेआउट प्रणाली का उपयोग कर रहा हूँ और मैं कुछ इस तरह हासिल करना चाहते हैं:

विचार यह है कि col1 और col2 में col3 और col4 संयुक्त के समान ऊंचाई होनी चाहिए।

कंटेनर की ऊंचाई निर्दिष्ट किए बिना और बच्चों के तत्वों पर ऊंचाई 100% सेट करने के बिना ऐसा करने का कोई तरीका है जैसा मैंने इस उदाहरण पर किया था?

Jsfiddle demo

Answer 1

पढ़ना: How can I make Bootstrap columns all the same height?

आप उपयोग कर सकते हैं:

.row{ 
 
    overflow: hidden; 
 
} 
 

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

 
.row1 { 
 
    height: 100%; 
 
} 
 

 
.col1{ 
 
    background-color: red; 
 
    color: white; 
 
    height: 100%; 
 
} 
 

 
.col2{ 
 
    background-color: green; 
 
    color: white; 
 
    height: 100%; 
 
} 
 

 
.col3{ 
 
    background-color: yellow; 
 
    height: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row row1"> 
 
     <div class="col col1 col-xs-3"> 
 
      Column 1 
 
     </div> 
 
     <div class="col col2 col-xs-3"> 
 
      Column 2 
 
     </div> 
 
     <div class="col col3 col-xs-3"> 
 
      <div class="row"> 
 
       Column 3 
 
      </div> 
 
      <div class="row"> 
 
       Column 4 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

:

.row{ 
    overflow: hidden; 
} 

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

यहाँ एक runnable उदाहरण है

Answer 2

आप प्रदर्शन का उपयोग कर की कोशिश कर सकते हैं: इस तरह फ्लेक्स:

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

Here के एक काम बेला

.col1 { 
 
    background-color: red; 
 
    color: white; 
 
} 
 

 
.col2 { 
 
    background-color: green; 
 
    color: white; 
 
} 
 

 
.col3 { 
 
    background-color: yellow; 
 
} 
 

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

<div class="container"> 
 
    <div class="row row-full-height row1"> 
 
    <div class="col col1 col-md-3"> 
 
     Column 1 
 
    </div> 
 
    <div class="col col2 col-md-3"> 
 
     Column 2 
 
    </div> 
 
    <div class="col col3 col-md-3"> 
 
     <div class="row"> 
 
     Column 3 
 
     </div> 
 
     <div class="row"> 
 
     Column 4 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>