使用 Twitter Bootstrap 创建 2 列固定流体布局
简介
创建具有固定宽度列和流体宽度列的布局是常见的要求响应式网页设计。这种布局样式支持固定的侧边栏或导航面板以及适应不同屏幕尺寸的灵活内容区域。使用Twitter Bootstrap，可以实现这一点布局。
实现
HTML
<div class="container-fluid fill">
<div class="row-fluid">
<div class="fixed">
...
</div>
<div class="filler">
...
</div>
</div>
</div>CSS
.fixed {
width: 150px;
float: left;
}
.fixed + div {
margin-left: 150px;
overflow: hidden;
}
.fill {
min-height: 100%;
position: relative;
}
.filler::after {
background-color:inherit;
bottom: 0;
content: "";
height: auto;
left: 0;
position: absolute;
top: 0;
width: inherit;
z-index: -1;
}说明
以上是如何使用 Twitter Bootstrap 创建固定流体布局？的详细内容。更多信息请关注PHP中文网其他相关文章！
