Twitter Bootstrap 布局的灵活性答案

【问题标题】：Flexibility of Twitter Bootstrap LayoutsTwitter Bootstrap 布局的灵活性
【发布时间】：2013-05-07 23:52:03
【问题描述】：

我目前正在为我的布局使用Yahoo user interface (YUI) 网格。我发现使用这些网格非常容易。进入（例如）1350px，居中的布局没有什么大惊小怪的。然后我可以添加一个 300px 的左导航列和 1050px 的右主列。

我喜欢Twitter Bootstrap 的外观和感觉。我想试用完整的软件包（仅使用我需要的控件）。我想从布局开始。我试图找到有关如何将宽度设置为我需要的宽度的文章。我如何将宽度设置为 1350 像素。或者可能是 1500 像素宽。我不希望宽度根据屏幕的宽度自行调整。我不介意浏览器底部的滚动条。左侧导航栏为 300 像素，其余部分填充 1050 像素。

在 Bootstrap 中可以实现这样的事情吗？与其他布局相比，您对使用 Bootstrap 的布局有何看法。

1350px 只是一个演示宽度，我只是想知道 Bootstrap 是否可以处理我想要的任何宽度。 Bootstrap 布局有多灵活？

【问题讨论】：

标签： javascript jquery css twitter-bootstrap yui

【解决方案1】：

您应该改用 YUI Grid Builder。 :)

http://yui.github.com/gridbuilder/

完全披露：我做到了。

【讨论】：

【解决方案2】：

我自己也为此苦苦挣扎，并在这里写了一个完整的答案：How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width

希望这会有所帮助！

基本上，所有列和装订线宽度都设置在您可以自定义的变量中。您唯一能做的就是将列和装订线宽度设置为您想要的，并为您的左列或内容列等指定一、二、三、四……等列宽。

要获得不流动的宽度，您只需使用 class="row" 而不是 class="row-fluid"

但是一旦设置了装订线宽度和列宽，就不能轻易指定宽度。只有列的倍数加上每个相应的装订线。

【讨论】：

似乎是获得您想要的宽度的任务？
这是使用响应式布局的唯一方法吗？如果我希望我的宽度为 1300 像素，那么即使用户决定调整浏览器的大小，我也希望它保持 1300 像素。
引导程序不必是流畅的。如果您在这里查看他们的文档：twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem
你会看到，如果你想要一个流动的行，你使用 div class row-fluid，如果你想要一个静态的行，你使用 div class row。两者都会响应。
但要获得准确的宽度将是一项任务。 Bootstrap 不适用于必须精确像素数量的布局。但话又说回来，布局是否应该依赖于确切的像素数量？比如 17px 的滚动条宽度在 Chrome 中是不计算的，但是在 Firefox 和 IE 中是这样的……太多的问题是精确的像素宽度。