Bootstrap 4 圣杯布局

Question

我一定是遗漏了一些明显的东西。我正在尝试在 Bootstrap 4.

中实现圣杯布局的衍生物

我希望将页眉和页脚放在流体中心列中，而不是页眉--> 左列、流体中心、右列--> 页脚。显然，页眉在顶部，页脚在底部，流动内容在中间。所有列的高度相同。

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

Bootstrap 4 Fixed-Fluid-Fixed

注意：需要注意的是在classic "holy grail" layout, the term "fixed" refers to width, and not position as in position:fixed. However, with a few tweaks it's possible to get both fixed width and position. For example, here's an alternate "holy grail" layout with left side bar fixed width and position: https://codeply.com/go/s90QZLC0WT