Bootstrap 4圣杯布局 [英] Bootstrap 4 Holy Grail Layout
本文介绍了Bootstrap 4圣杯布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
而不是Header - > Left Column，Fluid Center，Right Column - > Footer，I希望将我的页眉和页脚放在Fluid Center Column中。显然，顶部的标题，底部的页脚和中心的流体内容。和所有列相同的高度。
------------------- ----------------------------------
| |标题| |
| | --------------------------- | |
| LEFT | |正确|
| PANEL |主要内容| PANEL |
| | | |
| | | |
| | --------------------------- | |
| |页脚| |
---------------------------------------------- -------
代码的骨骼如下所示。在哪里我正在挣扎是让页眉和页脚正确显示在流体，中心列。我感觉FlexBox的答案就在于此，但是我的脑子里却不知如何去做！ data-hide =falsedata-console =truedata-babel =false>
< link href =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css =stylesheet/><< ; div class =container-fluid h-100id =root> < div class =row h-100> < div class =col-md-3 fixed py-3>页面面板左< / div> < div class =col fluid py-3>页面面板Main Stage< / div class =bg-warningstyle =height：8rem;>我是一个高度固定的标题< DIV> < div class =>我是内容，我应该是流畅的并且延伸到底部。< / div> < div class =bg-warningstyle =height：8rem;>我是具有固定高度的页脚< / div> < / DIV> < div class =col-md-3 fixed py-3>页面面板右< div> <峰; br> < p> Nullam争论，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商品euismod ipsum，quis pulvinar augue。不发酵酵母。在这里你可以看到，在ornare augue interdum eget。在porttitor的Vivamus porttitor iaculis urna。 Maecenas auctor ac augue convallis eleifend。华盛顿特区，美国华盛顿特区。克拉斯在nulla欧盟自由cursur cursus ut enim。 Praesent varius viverra maximus。 Morbi accumsan，orci quis semper tempus，leo ipsum efficitur ipsum，eu fermentum ipsum est ac nibh。 Ut ut venenatis爱神。 Duis neque nulla，malesuada non ultrices non，laoreet nec enim。 Mauris认为，ipsum非ultrices congue，leo eros tristique urna，biondum accumsan ligula sem in justo。< / p> < / DIV> < / DIV> < / div>< / div>
解决方案确保中间列是
flex-column ，然后使用 flex-grow：1 为主要内容。在这个例子中，我只在更大的屏幕上有固定宽度的侧边栏，但是你可以决定改变它。 http://www.codeply.com/go/licdodtBCO
< div class =container-fluid h-100>
< div class =row h-100>
<！ - 左边栏 - >
< div class =col-md-2 fixed>
< / div>
<！ - 中心内容 - >
< div class =col fluid d-flex flex-column>
< nav id =topNavclass =navbar>
< / nav>
<！ - 主要内容 - >
< div class =row flex-grow>
< / div>
< footer class =navbar navbar -tableable-xl navbar-faded navbar-light>
< / footer>
< / div>
<！ - 右侧栏 - >
< div class =col-md-2 fixed>
< / div>
< / div>
< / div>
CSS
html {
height：100％;
}
body {
min-height：100vh;
$ b $ *固定和流动只在sm和up * /
@media（min-width：576px）{
.fixed {
flex：0 0 200px;
最小高度：100vh;
}
.col .fluid {
min-height：100vh;
}
}
.flex-grow {
flex：1;
}
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://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圣杯布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
