引導4聖盃佈局

Question

我必須錯過一些明顯的東西。我試圖在Bootstrap 4中實現Holy Grail佈局的衍生。

而不是標題 - >左列，流體中心，右列 - >頁腳，我希望將我的頁眉和頁腳放入Fluid Center柱。顯然，頂部的標題，底部的頁腳和中心的流體內容。和所有列高度相同。

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

代碼的骨骼如下所示。我掙扎的地方是讓頁眉和頁腳正確顯示在流體中心列。我感覺FlexBox的答案在於，但是我無法圍繞如何做到這一點！

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

CSS

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