css – 带有twitter启动的全宽布局

因为接受的答案不在BS3的同一个星球上，我将分享我使用的是实现几乎全宽的功能。

首先，这是作弊。这不是真正的流体宽度 – 但它似乎是 – 取决于查看网站的屏幕的大小。

BS3和流体宽度站点的问题是，他们采取了这种“移动第一”的方法，这要求他们定义每个惊人的屏幕宽度，他们认为是桌面(1200像素)我在一台笔记本电脑上工作1900像素宽屏 – 所以我最终在内容的任何一边350px BS3认为是桌面尺寸的宽度。

他们已经定义了10个屏幕宽度(真的只有5，但反正)。我不觉得很舒服改变它们，因为它们是常见的宽度。所以，我选择定义一些额外的宽度，BS决定容器类的宽度时选择。

我使用BS的方式是把所有的Bootstrap提供的LESS文件，省略variables.less文件提供我自己，并添加一个自己到结束覆盖我想改变的事情。在我的较少的文件中，我添加以下以实现2个常见的屏幕宽度设置：

@media screen and (min-width: 1600pX) {
    .container {
        max-width: (1600px - @grid-gutter-width);
    }
}
@media screen and (min-width: 1900pX) {
    .container {
        max-width: (1900px - @grid-gutter-width);
    }
}

这两个设置为您实现不同的屏幕宽度需要做的举例。在这里，你得到全宽度在1600px和1900px。任何小于1600 – BS回落到1200px宽度，然后到768px等等 – 到手机大小。

如果你有更大的支持，只需创建更多的@media屏幕语句，像这样。如果你正在构建CSS，你会想要确定使用了什么水槽宽度，并从目标屏幕宽度减去它。

更新：BS 3.0.1及以上(到目前为止) – 它很容易设置@ container-large-desktop到100％