stream体或固定网格系统，在响应式devise中，基于Twitter Bootstrap
我对twitter引导网格中的各种选项感到困惑，以及它们如何一起前进。
首先，你可以有一个普通的固定container ，或一个container-fluid 。
那么任何一个都可以包括一个普通的row ，或者一个stream体行的row-fluid 。 也就是说，你可以有一个固定的容器与一个stream体行，或一个容器stream体…固定行？
那么最重要的是，您可以包括“响应式”媒体查询，或不包括。
我对这些事情如何相互作用感到困惑。 但是让我们从一个明显的例子开始。
在示例页面上，有一个固定网格和一个stream体网格的例子
但是，在我的浏览器中，在该示例页面上 – 两个网格的行为都是相同的。 也许是因为示例页面使用可选的响应式媒体查询？ 在这两个网格示例中，如果我逐渐缩小浏览器窗口，则网格元素不会逐渐变窄 – 一旦达到某个（响应）边界宽度，它们就会捕捉到更小的大小，并再次以更高的边界宽度捕捉。 但是普通的“固定”例子和“stream动”例子在这里performance得完全一样，那么差别究竟是什么？
当你在固定宽度和stream体宽度之间做出决定时，你需要考虑整个页面。 一般来说，你想select一个或另一个，但不是两个。 您在问题中列出的示例事实上是在相同的固定宽度页面中。 换句话说，脚手架页面正在使用固定宽度的布局。 脚手架页面上的固定网格和stream体网格不是示例，而是用于实现固定和stream体宽度布局的文档。
适当的固定宽度的例子在这里 。 在这里适当的stream体宽度的例子。
当观察固定宽度的例子时，当浏览器宽度大于960像素时，您不应该看到内容更改大小。 这是页面的最大（固定）宽度。 在固定宽度devise中的媒体查询将指定特定样式的最小宽度。 当您缩小浏览器窗口并查看布局alignment到不同的大小时，您将看到此操作。
相反，stream体宽度布局总是会延伸到适合您的浏览器窗口，不pipe它有多宽。 媒体查询指示样式何时更改，但容器的宽度始终是浏览器窗口的百分比（而不是固定数量的像素）。
“响应式”媒体查询已经准备就绪。 您只需要决定是否要为页面使用固定宽度或stream体宽度布局。
以前，在引导程序2中，您必须在stream体容器内部使用stream体stream体，并在固定容器内row 。 随着bootstrap 3的引入， row-fluid被删除， 不再使用它 。
编辑 ：根据评论，一些jsFiddles为：
- stream体不响应布局 ，
- stream体响应布局 ，
- 固定的非响应式布局 ，
- 固定响应式布局 。
这些小提琴完全无Bootstrap，基于纯CSS媒体查询，这使得它们成为一个不错的起点，对于任何愿意在不使用Twitter Bootstrap的情况下制作类似解决scheme的人来说。
有趣的讨论。 我也在问自己这个问题。 stream体和固定之间的主要区别在于固定布局在网站（视口）的整个布局方面具有固定的宽度。 如果您有一个960像素宽度的视口，每个柱面的固定宽度永远不会改变。
stream体布局performance不同。 想象一下，你已经将主布局的宽度设置为100％宽度。 现在，每列只会被计算为相对大小（即25％），并且会随着浏览器的大小调整而变大。 所以根据你的布局目的，你可以select你的布局如何performance。
这里是一个关于stream体与弯曲的好文章 。
优点
- 固定宽度的布局非常容易使用，并且在devise方面更容易定制。
- 每个浏览器的宽度是相同的，所以图像，表单，video和其他固定宽度的内容的麻烦较less。
- 不需要每个浏览器都不支持的最小宽度或最大宽度。
- 即使一个网站的devise与最小的屏幕分辨率，800×600兼容，内容仍然足够宽，在一个更大的分辨率，易于阅读。
缺点
- 固定宽度的布局可能会给屏幕分辨率较大的用户造成过大的空白，从而扰乱“神圣比例”，“三分法则”，整体平衡等devise原则。
- 较小的屏幕分辨率可能需要水平滚动条，具体取决于固定布局的宽度。
- 需要无缝的纹理，图案和图像延续以适应更高分辨率的图像。
- 在可用性方面，固定宽度的布局通常总体得分较低。
Bootstrap中的stream体布局3。
与Boostrap 2不同的是，Bootstrap 3没有容器混合stream体来制造stream体容器。 .container是一个固定宽度响应的网格布局。 在大屏幕上，网页内容两边都有过多的空白。
在Bootstrap 3.1中添加container-fluid
stream体网格布局使用所有的屏幕宽度，并在大屏幕上更好地工作。 事实certificate，使用Bootstrap 3 mixins很容易创buildstream体网格布局。 下面一行使stream体响应网格布局：
.container固定;
.container-fixed mixin将内容设置到屏幕的中心并添加填充。 它没有指定一个固定的页面宽度。
另一种方法是使用Eric Flowers的CSS风格
.my-fluid-container { padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; }
你可以使用这个 – https://github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid。 看看..我发现这个真的非常有用。 良好的性能，非常轻的重量，所有重要的浏览器友好和stream畅的本身，所以你不需要引导的电网。
