बूटस्ट्रैप 4 पवित्र ग्रेइल लेआउट

Question

मुझे कुछ स्पष्ट याद आना चाहिए। मैं बूटस्ट्रैप 4 में पवित्र Grail लेआउट के व्युत्पन्न को लागू करने की कोशिश कर रहा हूँ।

शीर्षलेख के बजाय -> बाएं कॉलम, द्रव केंद्र, दायां कॉलम -> पाद लेख, मैं फ्लुइड सेंटर के अंदर अपना हेडर और पाद लेख रखना चाहता हूं कॉलम। जाहिर है, शीर्ष पर शीर्षलेख के साथ, केंद्र में नीचे और द्रव सामग्री पर पाद लेख। और सभी कॉलम एक ही ऊंचाई।

----------------------------------------------------- 
|   |  Header    |   | 
|   |---------------------------|   | 
| LEFT |       | RIGHT  | 
| PANEL |  MAIN CONTENT  | PANEL  | 
|   |       |   | 
|   |       |   | 
|   |---------------------------|   | 
|   |  Footer    |   | 
----------------------------------------------------- 

कोड की हड्डियों को नीचे दिखाया गया है। जहां मैं संघर्ष कर रहा हूं, तरल पदार्थ, केंद्र कॉलम में सही तरीके से दिखाने के लिए हेडर और पाद लेख प्राप्त कर रहा है। मुझे लगता है कि इसका जवाब फ्लेक्सबॉक्स में है, लेकिन यह मेरे सिर को लपेट नहीं सकता है कि यह कैसे करें!

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid h-100" id="root"> 
 
    <div class="row h-100"> 
 
    <div class="col-md-3 fixed py-3">Page Panel Left</div> 
 
    <div class="col fluid py-3">Page Panel Main Stage 
 

 
     <div class="bg-warning" style="height:8rem;">I am a header with a fixed height.</div> 
 
     <div class="">I am the content, I should be fluid and stretch to the bottom.</div> 
 
     <div class="bg-warning" style="height:8rem;">I am the footer with a fixed height</div> 
 

 
    </div> 
 

 
    <div class="col-md-3 fixed py-3">Page Panel Right 
 
     <div> 
 
     <br> 
 
     <p>Nullam congue, dui luctus aliquam maximus, erat magna posuere purus, posuere elementum urna nisi vitae dolor. Integer tristique non velit ut suscipit. Vestibulum quam eros, blandit dapibus iaculis nec, volutpat vel purus. Quisque commodo euismod 
 
      ipsum, quis pulvinar augue. Cras non fermentum velit. Proin tincidunt lectus diam, at ornare augue interdum eget. Vivamus porttitor iaculis urna in porttitor. Maecenas auctor ac augue convallis eleifend. Praesent lacus odio, placerat sed felis 
 
      ac, vulputate auctor quam. Cras in nulla eu libero cursus cursus ut a enim. Praesent varius viverra maximus. Morbi accumsan, orci quis semper tempus, leo ipsum efficitur ipsum, eu fermentum ipsum est ac nibh. Ut ut venenatis eros. Duis neque 
 
      nulla, malesuada non ultrices non, laoreet nec enim. Mauris congue, ipsum non ultrices congue, leo eros tristique urna, bibendum accumsan ligula sem in justo.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

केंद्र स्तंभ flex-column है सुनिश्चित करें, और उसके बाद मुख्य सामग्री के लिए flex-grow:1 का उपयोग करें। इस उदाहरण में, मेरे पास केवल बड़ी स्क्रीन पर साइडबार निश्चित चौड़ाई है, लेकिन आप इसे बदलने का निर्णय ले सकते हैं।

http://www.codeply.com/go/licdodtBCO

<div class="container-fluid h-100"> 
    <div class="row h-100"> 
     <!-- left sidebar --> 
     <div class="col-md-2 fixed"> 

     </div> 
     <!-- center content --> 
     <div class="col fluid d-flex flex-column"> 
      <nav id="topNav" class="navbar"> 
      </nav> 

      <!-- main content --> 
      <div class="row flex-grow"> 

      </div> 

      <footer class="navbar navbar-toggleable-xl navbar-faded navbar-light"> 
      </footer> 

     </div> 
     <!-- right sidebar --> 
     <div class="col-md-2 fixed"> 

     </div> 
    </div> 
</div> 

सीएसएस

html { 
    height: 100%; 
} 

body { 
    min-height: 100vh; 
} 

/* fixed and fluid only on sm and up */ 
@media (min-width: 576px) { 
    .fixed { 
     flex: 0 0 200px; 
     min-height: 100vh; 
    } 
    .col .fluid { 
     min-height: 100vh; 
    } 
} 

.flex-grow { 
    flex:1; 
} 

Bootstrap 4 Holy Grail Demo

नोट: यह ध्यान रखें कि classic "holy grail" layout में महत्वपूर्ण है, अवधि "निर्धारित" चौड़ाई को संदर्भित करता है, और position:fixed में स्थिति के रूप में। हालांकि, कुछ बदलावों के साथ निश्चित चौड़ाई और स्थिति दोनों प्राप्त करना संभव है। https://www.codeply.com/go/s90QZLC0WT