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