Bootstrap 4 圣杯布局
[英] Bootstrap 4 Holy Grail Layout
本文介绍了Bootstrap 4 圣杯布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一定遗漏了一些明显的东西.我正在尝试在 Bootstrap 4 中实现圣杯布局的衍生物.
而不是页眉-->左栏，流动中心，右栏-->页脚，我希望我的页眉和页脚在流动中心栏内.显然，页眉在顶部，页脚在底部，流体内容在中心.并且所有列的高度相同.
-----------------------------------------------------||标题 ||||---------------------------|||左 ||右 ||面板 |主要内容 |面板 |||||||||||---------------------------||||页脚 ||-----------------------------------------------------
代码的骨架如下所示.我正在努力的地方是让页眉和页脚正确显示在流畅的中心列中.我感觉答案就在 FlexBox 中，但就是不知道该怎么做！
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="样式表"/><div class="container-fluid h-100" id="root"><div class="row h-100"><div class="col-md-3 fixed py-3">页面面板左侧</div><div class="col fluid py-3">页面面板主舞台<div class="bg-warning" style="height:8rem;">我是一个固定高度的header.</div><div class="">我是内容，我应该是流畅的，拉伸到底部.</div><div class="bg-warning" style="height:8rem;">我是固定高度的footer</div>
<div class="col-md-3 fixed py-3">页面面板右侧<div><br><p>Nullam congue、dui luctus aliquam maximus、erat magna posuere purus、posuere elementum urna nisi vitae dolor.整数 tristique non velit ut suscipit.Vestibulum quam eros、blandit dapibus iaculis nec、volutpat vel purus.Quisque commodo euismodipsum，quis pulvinar augue.Cras 非发酵 velit.Proin tincidunt lectus diam, at ornare augue interdum eget.Vivamus porttitor iaculis urna 在 porttitor.Maecenas auctor ac augue convallis eleifend.Praesent lacus odio, placerat sed felisac, 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、eufermentum ipsum est ac nibh.Ut ut venenatis eros.杜伊内克nulla，malesuada 非 ultrices 非，laoreet nec enim.Mauris congue、ipsum non ultrices congue、leo eros tristique urna、bibendum accumsan ligula sem in justo.</p>
解决方案
确保中心列是flex-column，然后使用flex-grow:1主要内容.在这个例子中，我在大屏幕上只有固定宽度的侧边栏，但你可以决定改变这一点.
http://codeply.com/go/licdodtBCO
<div class="row h-100"><!-- 左侧边栏--><div class="col-md-2 固定">
<!-- 中心内容--><div class="col fluid d-flex flex-column"><nav id="topNav";class =导航栏"></nav><!-- 主要内容--><div class="row flex-grow">
<footer class="navbar navbar-toggleable-xl navbar-faded navbar-light"></页脚>
<!-- 右侧边栏--><div class="col-md-2 固定">
CSS
html {高度:100%；}身体 {最小高度:100vh；}/* 固定和流动仅在 sm 及以上 */@media(最小宽度:576px){.固定的 {弹性:0 0 200px；最小高度:100vh；}.col .fluid {最小高度:100vh；}}.flex-增长{弹性:1;}
Bootstrap 4 圣杯演示
Bootstrap 4 Fixed-Fluid-Fixed
注意:需要注意的是，在经典的圣杯"中布局，术语固定"；指宽度，非位置，如position:fixed.但是，通过一些调整，可以获得固定的宽度和位置.例如，这里有一个替代的圣杯".左侧栏固定宽度和位置的布局:https://codeply.com/go/s90QZLC0WT
I must be missing something obvious. Am trying to implement a derivative of the Holy Grail layout in Bootstrap 4.
Instead of Header-->Left Column, Fluid Center, Right Column--> Footer, I wish to have my header and footer inside the Fluid Center Column. Obviously, with the header at the top, the footer at the bottom and fluid content in the center. And all columns the same height.
-----------------------------------------------------
| | Header | |
| |---------------------------| |
| LEFT | | RIGHT |
| PANEL | MAIN CONTENT | PANEL |
| | | |
| | | |
| |---------------------------| |
| | Footer | |
-----------------------------------------------------
The bones of the code are shown below. Where I am struggling is getting the header and footer to correctly show in the fluid, center column. I sense the answer lies in FlexBox, but just can't wrap my head around how to do it!
<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>
解决方案
Make sure the center column is flex-column, and then use flex-grow:1 for the main content. In this example, I only have the sidebars fixed width on larger screens, but you may decide to change this.
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
Note: It's important to note that in the 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
这篇关于Bootstrap 4 圣杯布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
