Bootstrap 3.0 - 包含固定列大小的流体网格?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (22)

我正在学习如何使用Bootstrap。目前,我正在穿过布局。尽管Bootstrap非常酷,但我看到的所有内容似乎都过时了。对于我的生活,我有我认为是我无法弄清楚的基本布局。我的布局如下所示:

---------------------------------------------------------------------------
|       |       |                                                         |
|       |       |                                                         |
| 240px | 160px | All Remaining Width of the Window                       |
|       |       |                                                         |
|       |       |                                                         |
--------------------------------------------------------------------------|

这个网格需要占据整个窗口的高度。根据我的理解,我需要混合固定宽度和流体宽度。但是,Bootstrap 3.0似乎没有流体类了。即使是这样,我似乎也无法弄清楚如何混合流体和固定的色谱柱尺寸。有谁知道如何在Bootstrap 3.0中做到这一点?

提问于
用户回答回答于

在Bootstrap 3中混合流体和固定宽度真的没有简单的方法。它的意思就是这样,因为网格系统被设计成一个流畅的响应式事物 你可以尝试黑客入侵,但它会违背响应式网格系统尝试执行的操作,其目的是使该布局在不同设备类型之间流动。

如果你需要坚持这种布局,我会考虑用自定义CSS布局你的页面,而不是使用网格。

用户回答回答于

由于很多人似乎都想这样做,所以我在这里写了一个简短的指南,里面有一个更通用的用例https://www.atlascode.com/bootstrap-fixed-width-sidebars/。希望能帮助到你。

bootstrap3网格系统支持行嵌套,它允许你调整根行以允许固定宽度的侧面菜单。

你需要在根行上放置填充左侧,然后有一个包含常规网格布局元素的子行。

这里是我通常做这个 http://jsfiddle.net/u9gjjebj/

HTML

<div class="container">
    <div class="row">
        <div class="col-fixed-240">Fixed 240px</div>
        <div class="col-fixed-160">Fixed 160px</div>
        <div class="col-md-12 col-offset-400">
            <div class="row">
            Standard grid system content here
            </div>
        </div>
    </div>
</div>

CSS

.col-fixed-240{
    width:240px;
    background:red;
    position:fixed;
    height:100%;
    z-index:1;
}

.col-fixed-160{
    margin-left:240px;
    width:160px;
    background:blue;
    position:fixed;
    height:100%;
    z-index:1;
}

.col-offset-400{
    padding-left:415px;
    z-index:0;
}

扫码关注云+社区