使用 Twitter Bootstrap 实现固定流体布局
尽管 Twitter Bootstrap 很受欢迎,但人们对其创建两个-具有固定宽度侧面板和流动宽度内容区域的列布局。
可能的解决方案:
原始解决方案(Bootstrap v1.0)
使用修改后的 HTML 和 CSS 的组合,可以在 Bootstrap v1.0 中实现固定流体布局。更新后的代码如下:
<div class="container-fluid fill"> <div class="row-fluid"> <div class="fixed"> <!-- Fixed width --> ... </div> <div class="hero-unit filler"> <!-- Removed spanX class --> ... </div> </div> </div>
.fixed { width: 150px; /* Fixed width */ float: left; } .fixed + div { margin-left: 150px; /* Match fixed width */ overflow: hidden; } /* CSS to ensure sidebar and content are same height (optional) */ html, body { height: 100%; } .fill { min-height: 100%; position: relative; } .filler::after{ background-color:inherit; bottom: 0; content: ""; left: 0; margin:inherit; min-height: 100%; position: absolute; top: 0; width: inherit; z-index: -1; }
更新的解决方案(Bootstrap v2.0)
删除“.container-fluid”类Twitter Bootstrap v2.0 中使原始解决方案不兼容。但是,稍微修改 CSS 即可实现两列固定流体布局:
.fixed { width: 150px; /* Fixed width */ float: left; } .fixed + div { margin-left: 150px; /* Match fixed width */ overflow: hidden; }
确保侧边栏和内容的高度相等
虽然不是必需的,通常需要确保侧边栏和内容列具有相同的高度。这可以通过向流体宽度列添加“.filler”类并使用 ::after 伪选择器添加似乎填充剩余空间的填充元素来实现。
.filler::after { background-color: inherit; bottom: 0; content: ""; height: 100%; left: 150px; /* Match fixed width */ position: absolute; top: 0; width: 100%; z-index: -1; }
注释:
以上是如何在 Twitter Bootstrap 中实现固定宽度的侧边栏和流动宽度的内容区域?的详细内容。更多信息请关注PHP中文网其他相关文章!