Bootstrap 4 Bố cục Chén Thánh

Question

Tôi phải thiếu điều gì đó hiển nhiên. Đang cố gắng để thực hiện một đạo hàm của bố trí Chén Thánh trong Bootstrap 4.

Thay vì tiêu đề -> Cột trái, Trung tâm chất lỏng, Cột bên phải -> Chân trang, tôi muốn có đầu trang và chân trang bên trong Trung tâm chất lỏng Cột. Rõ ràng, với tiêu đề ở trên cùng, chân trang ở phía dưới và nội dung chất lỏng ở giữa. Và tất cả các cột có cùng chiều cao.

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

Xương của mã được hiển thị bên dưới. Nơi tôi đang đấu tranh là nhận được tiêu đề và chân trang để hiển thị chính xác trong cột trung tâm, chất lỏng. Tôi cảm thấy câu trả lời nằm trong FlexBox, nhưng không thể quấn đầu của tôi xung quanh làm thế nào để làm điều đó!

<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

Hãy chắc chắn rằng cột trung tâm là flex-column, và sau đó sử dụng flex-grow:1 về nội dung chính. Trong ví dụ này, tôi chỉ có chiều rộng cố định sidebars trên màn hình lớn hơn, nhưng bạn có thể quyết định thay đổi điều này.

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

Lưu ý: Điều quan trọng cần lưu ý là trong classic "holy grail" layout, thuật ngữ "cố định" dùng để chỉ chiều rộng, và không phải là vị trí như trong position:fixed. Tuy nhiên, với một vài tinh chỉnh, bạn có thể nhận được cả chiều rộng cố định và vị trí. Ví dụ: đây là bố cục "chén thánh" thay thế với thanh bên trái chiều rộng cố định và vị trí: https://www.codeply.com/go/s90QZLC0WT