首页 > web前端 > css教程 > 如何在 Twitter Bootstrap 中实现固定宽度的侧边栏和流动宽度的内容区域?

如何在 Twitter Bootstrap 中实现固定宽度的侧边栏和流动宽度的内容区域?

Patricia Arquette
发布: 2024-11-17 01:22:03
原创
928 人浏览过

How Can You Achieve a Fixed-Width Sidebar and Fluid-Width Content Area in Twitter Bootstrap?

使用 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;  
}
登录后复制

注释:

  • 对于流体-流体布局,将“.container-fluid”设置为最小高度为 100%。
  • 要有填充元素在页面左侧,更改“left: 150px;”到“右:0;”。

以上是如何在 Twitter Bootstrap 中实现固定宽度的侧边栏和流动宽度的内容区域?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板