बूटस्ट्रैप में समान div और 100% ऊंचाई

Question

मैं 5 डीवी के साथ पेज बनाने की कोशिश कर रहा हूं।

कोड अब तक::

.container-fluid2 { 
 
    min-height: 100%; 
 
    overflow: hidden; 
 
    background-color: black; 
 
} 
 
.levogore5 { 
 
    height: 50%; 
 
    min-height: 50%; 
 
    margin-bottom: -22%; 
 
    padding-bottom: 22%; 
 
    min-width: 25%; 
 
    max-width: 100%; 
 
    background-color: lime; 
 
    vertical-align: top; 
 
} 
 
.levodole5 { 
 
    height: 50%; 
 
    min-height: 50%; 
 
    margin-bottom: -25%; 
 
    padding-bottom: 25%; 
 
    min-width: 25%; 
 
    max-width: 100%; 
 
    background-color: green; 
 
    vertical-align: baseline; 
 
    margin-top: 22%; 
 
} 
 
.centar5 { 
 
    height: 100%; 
 
    min-height: 100%; 
 
    min-width: 50%; 
 
    max-width: 100%; 
 
    background-color: red; 
 
    margin-bottom: -50%; 
 
    padding-bottom: 50%; 
 
    overflow: hidden; 
 
} 
 
.desnogore5 { 
 
    height: 50%; 
 
    min-height: 50%; 
 
    margin-bottom: -22%; 
 
    padding-bottom: 22%; 
 
    min-width: 25%; 
 
    max-width: 100%; 
 
    background-color: aqua; 
 
    vertical-align: top; 
 
} 
 
.desnodole5 { 
 
    height: 50%; 
 
    min-height: 50%; 
 
    margin-bottom: -25%; 
 
    padding-bottom: 25%; 
 
    min-width: 25%; 
 
    max-width: 100%; 
 
    background-color: blue; 
 
    vertical-align: baseline; 
 
    float: right; 
 
    margin-top: 22%; 
 
}

<div class="container-fluid2"> 
 
    <div class="row"> 
 
    <div class="col-sm-3 levogore5">levo gore</div> 
 
    <div class="col-sm-5 col-sm-5 span2 centar5">centralni</div> 
 
    <div class="col-sm-3 desnogore5">desno gore</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-sm-3 levodole5">levo dole</div> 
 
    <div class="col-sm-3 desnodole5">desno dole</div> 
 
    </div> 
 
</div>

योजना केंद्रीय DIV में एक तस्वीर है, और अन्य 4 में से प्रत्येक में एक लिंक डाल करने के लिए, बूटस्ट्रैप 3.

वांटेड परिणाम उपयोग कर रहा है

मुझे लगता है मैं सभी मौजूदा क्ष पढ़ यहां और जवाब।
मैंने html/body 100%, max-height, container-fluid, -9999px की कोशिश की, लेकिन उन्होंने काम नहीं किया।

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

मेरा विचार, बूटस्ट्रैप उपयोग कर रहा है छोटे स्क्रीन के साथ कम समस्याओं के लिए अधिक सरल पन्नों में सिर्फ क्षैतिज DIVs की तो मैं आशा ढेर कर बूटस्ट्रैप यह एक बहुत अच्छा उदाहरण है इस

Answer 1

बूटस्ट्रैप ग्रिड (अतिरिक्त अंक क्योंकि आप shouldn को संशोधित किए बिना उत्तरदायी उदाहरण नहीं लिखते ग्रिड को संशोधित नहीं करें या आप इसे हर परिदृश्य में उपयोग नहीं कर पाएंगे)

मुझे अपना एचटीएमएल बदलना और कुछ कक्षाएं जोड़नी थी:

<div class="container-fluid container-table"> 
    <div class="row inline-row"> 
    <!-- I'm using three columns and nesting aqua and blue under the 1st column --> 
    <div class="col-xs-12 col-sm-3"> 
     <div class="row"> 
     <div class="col-xs-12 aqua"></div> 
     <div class="col-xs-12 blue"></div> 
     </div> 
    </div> 

    <div class="col-xs-12 col-sm-6 yellow"></div> 

    <!-- Nesting greenyellow and green --> 
    <div class="col-xs-12 col-sm-3"> 
     <div class="row"> 
     <div class="col-xs-12 greenyellow"></div> 
     <div class="col-xs-12 green"></div> 
     </div> 
    </div> 

    </div> 
</div> 

और सीएसएस:

/* Colors */ 
.aqua{ background-color:aqua; } 
.blue{ background-color:blue; } 
.yellow{ background-color:yellow; } 
.greenyellow{ background-color:greenyellow; } 
.green{ background-color:green; } 

/* Height 100% to all the elements */ 
html, 
body, 
.container-table, 
.inline-row, 
.inline-row > div { 
    height: 100%; 
} 

/* We do the trick here with Table, table row and table-cell */ 
.container-table { 
    display: table; 
    width: 100%; /* Width is important for display:table */ 
} 
.inline-row { display: table-row; } 
.inline-row > div { display: table-cell; } 

/* This will set our heights as we need them */ 
.inline-row > div > .row { height: 100%; } 
.inline-row > div .row > div { height: 50%; } 

संपादित करें: चौड़ाई के बदला गया दाएं और बाएं ग्रिड से 25%।

My JsFiddle Live example

Answer 2

की तरह कुछ है करने के लिए flex box का उपयोग करने के लिए एक जगह का!

ऐसा लगता है कि आप इसके लिए एक पंक्ति-आधारित दृष्टिकोण ले रहे हैं। मुझे लगता है कि कॉलम-आधारित दृष्टिकोण अधिक उपयुक्त है।

जब मैं किसी साइट को डिज़ाइन कर रहा हूं, तो मुझे इसे चौराहे या आयत में तोड़ने की कोशिश करना है जो चौड़ाई या पृष्ठ की ऊंचाई पर सभी तरह से जाता है।

मेरे दिमाग में, इस डिज़ाइन में पृष्ठ की चौड़ाई में 1 आयताकार चल रहा है, जिसमें पृष्ठ की ऊंचाई पर 3 आयताकार चलते हैं, और फिर उनमें से प्रत्येक में कुछ छोटे आयताकार होते हैं।

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.column > div { 
 
    border: 1px solid blue; 
 
    min-height: 150px; 
 
} 
 
@media (min-width: 600px) { 
 
    .row { 
 
    display: flex; 
 
    flex-direction: row; 
 
    min-height: 100vh; 
 
    } 
 
    .row > div { 
 
    flex-basis: 25%; 
 
    } 
 
    .row > div.main { 
 
    flex-basis: 50%; 
 
    } 
 
    .column { 
 
    display: flex; 
 
    flex-direction: column; 
 
    } 
 
    .column > div { 
 
    flex-basis: 50%; 
 
    } 
 
    .column.main > div { 
 
    flex-basis: 100%; 
 
    } 
 
}

<div class="row"> 
 
    <div class="column"> 
 
    <div>Div width 25% height 50%</div> 
 
    <div>Div width 25% height 50%</div> 
 
    </div> 
 
    <div class="column main"> 
 
    <div>Div width 50% height 100%</div> 
 
    </div> 
 
    <div class="column"> 
 
    <div>Div width 25% height 50%</div> 
 
    <div>Div width 25% height 50%</div> 
 
    </div> 
 
</div>

Answer 3

Fiddle

संक्षेप में, आप 6 बक्से बनाते हैं।
क्या आप भी उनके बीच कोई पैडिंग नहीं चाहते हैं?

यदि हां, तो बस अपने सीएसएस में जोड़ें:

[class*='col-'] { 
    padding-right:0; 
    padding-left:0; 
} 

HTML:

<div class="container-fluid2"> 
    <div class="row"> 
    <div class='col-sm-3'> 
     <div class="bg-color-red">left 3</div> 
     <div class="bg-color-green">left 3</div> 
    </div> 
    <div class="col-sm-6 bg-color-green"> 
      <div class="bg-color-green">central 6</div> 
    <div class="bg-color-green">central 6</div> 
    </div> 

    <div class='col-sm-3'> 
     <div class="bg-color-red">right 3</div> 
     <div class="bg-color-green">right 3</div> 
    </div> 
    </div> 
</div> 

सीएसएस:
बूटस्ट्रैप। बेवकूफ देखें।

Answer 4

मैंने आपको नीचे दिया है कोड जो छोटे डेस्कटॉप से ​​सबसे बड़ा (सभी मामलों में डेस्कटॉप) बूटस्ट्रैप के साथ काम करेगा।जैसा कि आपने कहा आप बवासीर की तरह जब यह मोबाइल की बात आती है तो बस col-sm-* वर्गों और @media क्वेरी

.height-50{ 
 
    height : 480px; 
 
} 
 

 
.height-100{ 
 
    height : 960px; 
 
} 
 

 
.container-fluid div{ 
 
    border : 1px solid black; 
 
} 
 

 
@media (min-width: 576px) { 
 
    .height-50{ 
 
    height : 230px; 
 
    } 
 

 
    .height-100{ 
 
    height : 460px; 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous"> 
 
<div class="container-fluid"> 
 
    <div class="col-lg-3 col-sm-3"> 
 
    <div class="row"> 
 
     <div class="col-lg-12 col-sm-12 height-50" style="background-color : lightgray"> 
 
     Width : 25%;<br>Height : 50%; 
 
     </div> 
 
     <div class="col-lg-12 col-sm-12 height-50" style="background-color : #9898e7"> 
 
     Width : 25%;<br>Height : 50%; 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-lg-6 col-sm-6"> 
 
    <div class="row"> 
 
     <div class="col-lg-12 col-sm-12 height-100" style="background-color : yellow"> 
 
     Width : 50%;<br>Height : 100%; 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="col-lg-3 col-sm-3"> 
 
    <div class="row"> 
 
     <div class="col-lg-12 col-sm-12 height-50" style="background-color : yellowgreen"> 
 
     Width : 25%;<br>Height : 50%; 
 
     </div> 
 
     <div class="col-lg-12 col-sm-12 height-50" style="background-color : green"> 
 
     Width : 25%;<br>Height : 50%; 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>