我对twitter bootstrap grid中的各种选项感到困惑，以及它们如何结合在一起。
首先，您可以拥有普通的固定container或container-fluid。
然后，任何一个都可以包含普通row或流畅的行row-fluid。也就是说，你可以拥有一个带有流体排的固定容器，或一个带有固定行的容器流体......
然后，最重要的是，您可以包含“响应式”媒体查询。
我对这些事情如何相互作用感到困惑。但让我们从一个明显的例子开始。
在the examples page本身上，有一个例子显示为fixed grid和fluid grid
但是，在我的浏览器中，在该示例页面本身上 - 两个网格的行为完全相同。也许是因为示例页面使用可选的响应式媒体查询？在两个网格示例中，如果我开始逐渐缩小我的浏览器窗口，那么网格元素不逐渐变窄 - 一旦达到某个（响应性）边界宽度，它们就会捕捉到更小的尺寸，并再次在更大的边界宽度。但是普通的“固定”示例和“流动”示例在这里表现完全一样 - 那么差异究竟是什么呢？
答案 0 :(得分：443)
当你决定固定宽度和流体宽度时，你需要考虑你的整个页面。通常，您想要选择其中一个，但不是两个。您在问题中列出的示例实际上是在相同的固定宽度页面中。换句话说，Scaffolding页面使用固定宽度的布局。 Scaffolding页面上的fixed grid和fluid grid不是示例，而是实现固定和流体宽度布局的文档。
正确的固定宽度示例为here。 适当的流体宽度示例为here。
观察固定宽度示例时，如果浏览器宽度超过960px，则不应看到内容更改大小。这是页面的最大（固定）宽度。固定宽度设计中的媒体查询将指定特定样式的最小宽度。缩小浏览器窗口并看到布局捕捉到不同大小时，您将看到这一点。
相反，流体宽度布局始终拉伸以适合您的浏览器窗口，无论它有多宽。媒体查询指示样式何时更改，但容器的宽度始终是浏览器窗口的百分比（而不是固定数量的像素）。
“响应式”媒体查询已准备就绪。您只需要确定是否要为页面使用固定宽度或流体宽度布局。
以前，在bootstrap 2中，您必须在流体容器内使用row-fluid并在固定容器内使用row。随着引导程序3的引入，row-fluid被删除，不再使用它。
编辑：根据评论，一些 jsFiddles ：
这些小提琴完全没有Bootstrap，基于纯CSS媒体查询，对于任何愿意在不使用Twitter Bootstrap的情况下制作类似解决方案的人来说，这是一个很好的起点。
答案 1 :(得分：21)
有趣的讨论。我也问自己这个问题。流体和固定之间的主要区别在于，固定布局在网站（视口）的整个布局方面具有固定的宽度。如果您有一个960像素宽的视口，则每个列都有一个固定的宽度，永远不会改变。
流体布局表现不同。想象一下，您已将主布局的宽度设置为100％宽度。现在，每个列只会计算它的相对大小（即25％）和拉伸，因为浏览器将调整大小。因此，根据您的布局目的，您可以选择布局的行为方式。
答案 2 :(得分：7)
赞成
缺点
答案 3 :(得分：6)
Bootstrap 3中的流体布局。
与Boostrap 2不同，Bootstrap 3没有.container-fluid mixin来制作流体容器。 .container是固定宽度响应网格布局。在大屏幕中，一个网页内容的两侧都有过多的空白区域。
在Bootstrap 3.1 中添加了 container-fluid
流体网格布局使用所有屏幕宽度，在大屏幕中效果更佳。事实证明，使用Bootstrap 3 mixins创建流畅的网格布局很容易。以下行生成流体响应网格布局：
.container固定;
.container-fixed mixin将内容设置为屏幕中心并添加填充。它没有指定固定的页面宽度。
另一种方法是使用Eric Flowers' CSS style
.my-fluid-container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
答案 4 :(得分：-2)
你可以使用它 - https://github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid。看看..我发现这个非常有用。良好的性能，非常轻的重量，所有重要的浏览器友好和流畅本身，所以你真的不需要为网格引导。