我对twitter引导网格中的各种选项以及它们是如何结合在一起感到困惑。
首先，你可以有一个普通的固定容器，或容器流体。
然后其中任何一个都可以包含普通行，或流体行，行流体。也就是说，可以使用带有流体行的固定容器或容器流体…用一个固定的行?
然后在此之上，你可以包含“响应式”媒体查询，或者不包含。
我对这些东西是如何相互作用感到困惑。但让我们从一个明显的例子开始。
在示例页面上，有一个固定网格和流体网格的示例
However, in my browser, on that example page itself -- both grids behave identically. Perhaps because the example page uses the optional responsive media queries? In both grid examples, if I start gradually narrowing my browser window, the grid elements do not get gradually narrower -- once a certain (responsive) boundary width is reached, they snap to a smaller size, and again at further boundary widths. But both the ordinary 'fixed' example AND the 'fluid' example behave exactly the same here -- so what the heck is the difference?
引导3中的流体布局。
与Bootstrap 2不同，Bootstrap 3没有.container-fluid mixin来创建流体容器。container是一个固定宽度的响应式网格布局。在大屏幕上，Web页面内容的两边有过多的空白。
在Bootstrap 3.1中重新添加了容器流体
流体网格布局使用所有屏幕宽度，在大屏幕上工作得更好。事实证明，使用Bootstrap 3 mixins很容易创建一个流体网格布局。下面这行是流体响应式网格布局:
.container-fixed;
固定容器的mixin将内容设置为屏幕的中心并添加填充。它没有指定固定的页面宽度。
另一种方法是使用Eric Flowers的CSS样式
.my-fluid-container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
引导3中的流体布局。
与Bootstrap 2不同，Bootstrap 3没有.container-fluid mixin来创建流体容器。container是一个固定宽度的响应式网格布局。在大屏幕上，Web页面内容的两边有过多的空白。
在Bootstrap 3.1中重新添加了容器流体
流体网格布局使用所有屏幕宽度，在大屏幕上工作得更好。事实证明，使用Bootstrap 3 mixins很容易创建一个流体网格布局。下面这行是流体响应式网格布局:
.container-fixed;
固定容器的mixin将内容设置为屏幕的中心并添加填充。它没有指定固定的页面宽度。
另一种方法是使用Eric Flowers的CSS样式
.my-fluid-container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
当你决定在固定宽度和流动宽度之间，你需要考虑你的整个页面。一般来说，你想要选择其中一个，而不是两个。事实上，你在问题中列出的例子都在同一个固定宽度的页面中。换句话说，脚手架页面使用固定宽度的布局。脚手架页面上的固定网格和流体网格并不是示例，而是实现固定宽度和流体宽度布局的文档。
适当的固定宽度示例如下。
适当的流体宽度示例如下。
当观察固定宽度的例子时，当你的浏览器宽度大于960px时，你不应该看到内容改变大小。这是页面的最大(固定)宽度。固定宽度设计中的媒体查询将为特定样式指定最小宽度。当您缩小浏览器窗口并看到布局捕捉到不同的大小时，您将看到这一点。
相反，流体宽度布局将始终拉伸以适应浏览器窗口，无论它有多宽。媒体查询指示样式更改的时间，但容器的宽度始终是浏览器窗口的百分比(而不是固定的像素数)。
“响应式”媒体查询已经准备就绪。您只需要决定是否要使用固定宽度或流动宽度布局的页面。
以前，在自举2中，必须在流体容器中使用行流体，在固定容器中使用行流体。随着bootstrap 3的引入，行流体被移除，不要再使用它。
编辑:根据评论，一些jsFiddles用于:
流体非响应式布局，
流体响应式布局，
固定无响应的布局，
固定响应式布局。
这些技巧完全不需要Bootstrap，基于纯CSS媒体查询，对于任何愿意在不使用Twitter Bootstrap的情况下制作类似解决方案的人来说，这是一个很好的起点。
