我试图用Twitter Bootstrap 3做一个两列全高布局。Twitter Bootstrap 3似乎不支持全高布局。
我想做的是:
+-------------------------------------------------+
| Header |
+------------+------------------------------------+
| | |
| | |
|Navigation | Content |
| | |
| | |
| | |
| | |
| | |
| | |
+------------+------------------------------------+
如果内容增长，导航也应该增长。
高度100%为每个父级是行不通的，因为有些情况下内容是一行。
立场:绝对似乎是错误的方式。
Display: table和Display: table-cell解决了这个问题，但不够优雅。
HTML:
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9"></div>
</div>
</div>
有办法使它与默认的推特引导3类?
编辑:
在Bootstrap 4中，本地类可以生成全高列(DEMO)，因为它们将网格系统更改为flexbox。(请继续阅读Bootstrap 3)
原生Bootstrap 3.0类不支持你描述的布局，但是，我们可以集成一些自定义CSS，利用CSS表来实现这一点。
Bootply demo / Codepen
标记:
<header>Header</header>
<div class="container">
<div class="row">
<div class="col-md-3 no-float">Navigation</div>
<div class="col-md-9 no-float">Content</div>
</div>
</div>
(相关的)的CSS
html,body,.container {
height:100%;
}
.container {
display:table;
width: 100%;
margin-top: -50px;
padding: 50px 0 0 0; /*set left/right padding according to needs*/
box-sizing: border-box;
}
.row {
height: 100%;
display: table-row;
}
.row .no-float {
display: table-cell;
float: none;
}
上面的代码将实现全高的列(由于我们添加了自定义css-table属性)和比例为1:3(导航:内容)的中等屏幕宽度和以上-(由于bootstrap的默认类:col-md-3和col-md-9)
NB:
1)为了不搞乱bootstrap的原生列类，我们在标记中添加了另一个类，比如no-float，并且只在这个类上设置display:table-cell和float:none(与列类本身相反)。
2)如果我们只想对特定的断点(比如中等屏幕宽度以上)使用CSS -table代码，但对于移动屏幕，我们想默认回到通常的引导行为，而不是我们可以在媒体查询中包装我们的自定义CSS，说:
@media (min-width: 992px) {
.row .no-float {
display: table-cell;
float: none;
}
}
Codepen演示
现在，对于较小的屏幕，列将表现为默认的引导列(每个都获得全宽度)。
3)如果所有屏幕宽度都需要1:3的比例，那么从标记中删除bootstrap的col-md-*类可能会更好，因为这不是它们应该被使用的方式。
Codepen演示
据我所知，你可以使用5种方法来完成这个任务:
使用CSS显示表/表格单元格属性或使用实际的表。
在包装器内使用绝对定位元素。
使用Flexbox显示属性，但到今天为止，它仍然有部分支持
使用伪列技术模拟全列高度。
使用填充/边距技术。看到的例子。
Bootstrap:我在这方面没有太多经验，但我不认为他们提供了这样的样式。
.row
{
overflow: hidden;
height: 100%;
}
.row .col-md-3,
.row .col-md-9
{
padding: 30px 3.15% 99999px;
float: left;
margin-bottom: -99999px;
}
.row .col-md-3 p,
.row .col-md-9 p
{
margin-bottom: 30px;
}
.col-md-3
{
background: pink;
left:0;
width:25%
}
.col-md-9
{
width: 75%;
background: yellow;
}
解决方案可以通过两种方式实现
使用display:table和display:table-cell
使用填充和负边距。
用于获得上述解决方案的类在引导3中没有提供。
display:table和display:table-cell只在HTML中使用表格时给出。
负边距和填充类也不存在。
因此，我们必须使用自定义css来实现这一点。
下面是第一个解决方案
HTML代码:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h3>Page-Header</h3>
</div>
</div>
</div>
<div class="row tablewrapper">
<div class="col-md-12 tablerowwrapper">
<div class="col-md-3 sidebar pad_top15">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Submenuone</a></li>
<li><a href="#">Submenutwo</a></li>
<li><a href="#">Submenuthree</a></li>
</ul>
</div>
<div class="col-md-9 content">
<div class="col-md-12">
<div class="col-md-12">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="col-md-12">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="col-md-12">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="col-md-12">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="col-md-12">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="col-md-12">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
</div>
</div>
</div>
</div>
</div>
对应的css:
html,body,.container{
height:100%;
}
.tablewrapper{
display:table;
height:100%;
}
.tablerowwrapper{
display:table-row;
}
.sidebar,.content{
display:table-cell;
height:100%;
border: 1px solid black;
float:none;
}
.pad_top15{
padding-top:15px;
}
下面是第二个解决方案
HTML代码:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h3>Page-Header</h3>
</div>
</div>
</div>
<div class="row ovfhidden bord_bot height100p">
<div class="col-md-3 sidebar pad_top15">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Submenuone</a></li>
<li><a href="#">Submenutwo</a></li>
<li><a href="#">Submenuthree</a></li>
</ul>
</div>
<div class="col-md-9 content pad_top15">
<div class="col-md-12">
<div class="col-md-12">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div><div class="col-md-12">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="col-md-12">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div><div class="col-md-12">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="col-md-12">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div><div class="col-md-12">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="col-md-12">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div><div class="col-md-12">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="col-md-12">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div><div class="col-md-12">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="col-md-12">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div><div class="col-md-12">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
</div>
</div>
</div>
</div>
对应的css:
html,body,.container{
height:100%;
}
.sidebar,.content{
/*display:table-cell;
height:100%;*/
border: 1px solid black;
padding-bottom:8000px;
margin-bottom:-8000px;
}
.ovfhidden{
overflow:hidden;
}
.pad_top15{
padding-top:15px;
}
.bord_bot{
border-bottom: 1px solid black;
}
在尝试了这里提供的代码后:引导教程
下面是另一个使用最新Bootstrap v3.0.2的替代方案:
标记:
<div id="headcontainer" class="container">
<p>Your Header</p>
</div>
<div id="maincontainer" class="container">
<div class="row">
<div class="col-xs-4">
<p>Your Navigation</p>
</div>
<div class="col-xs-8">
<p>Your Content</p>
</div>
</div>
</div>
额外的CSS:
#maincontainer, #headcontainer {
width: 100%;
}
#headcontainer {
background-color:#CCCC99;
height: 150px
}
#maincontainer .row .col-xs-4{
background-color:gray;
height:1000px
}
#maincontainer .row .col-xs-8{
background-color:green;
height: 1000px
}
样本JSFiddle
希望这对感兴趣的人有所帮助。
