流式或固定网格系统，在响应式设计中，基于Twitter Bootstrap。

Question

我对twitter bootstrap grid中的各种选项及其如何组合感到困惑。

首先，您可以拥有普通的固定container或一个container-fluid。

然后，任何一个都可以包含普通row或流动行row-fluid。也就是说，您可以拥有一个带有流动行的固定容器，或者一个容器-流动行？

然后，在此基础上，您可以包含“响应式”媒体查询，也可以不包含。

我对这些事物的交互方式感到困惑。但让我们从一个明显的例子开始。

在examples page本身上，有一个被呈现为fixed grid和fluid grid的示例。

然而，在我的浏览器中，这个示例页面上的两个网格表现得完全一样。也许是因为示例页面使用了可选的响应式媒体查询？在这两个网格示例中，如果我逐渐缩小浏览器窗口，网格元素不会逐渐变窄——一旦达到某个（响应式）边界宽度，它们就会自动调整到更小的尺寸，并在进一步的边界宽度处再次进行调整。但是，普通的“固定”示例和“流体”示例在这里的行为完全相同，那么有什么区别呢？

- jrochkind

---

也许这个链接（http://twitter.github.com/bootstrap/examples/fluid.html）更能展示流式布局的样式？ - Cody Gray

Answer 1

当你在固定宽度和流动宽度之间做出决定时，需要考虑整个页面。通常情况下，你想选择其中一种，而不是两种都用。你在问题中列举的示例实际上在同一个固定宽度页面中。换句话说，Scaffolding页面使用了固定宽度布局。Scaffolding页面上的fixed grid和fluid grid不是示例，而是实现固定和流动宽度布局的文档。

适当的固定宽度示例在这里。 适当的流动宽度示例在这里。

观察固定宽度示例时，当您的浏览器大于960像素宽时，不应看到内容大小发生变化。这是页面的最大（固定）宽度。在固定宽度设计中，媒体查询将指定特定样式的最小宽度。当您缩小浏览器窗口并看到布局自动调整为不同大小时，您会看到此效果。

相反，流体宽度布局将始终根据您的浏览器窗口自动拉伸，无论它有多宽。媒体查询指示样式何时更改，但容器的宽度始终是浏览器窗口的百分比（而不是固定像素数）。

“响应式”媒体查询已准备就绪。您只需要决定是否要为页面使用固定宽度或流体宽度布局。

以前，在bootstrap 2中，您必须在流动容器内使用row-fluid，在固定容器内使用row。随着引入bootstrap 3，row-fluid被移除，请不再使用它。 编辑：根据评论，提供一些关于jsFiddles的示例：

• 流体非响应式布局,
• 流体响应式布局,
• 固定非响应式布局,
• 固定响应式布局.

这些代码片段完全不依赖Bootstrap，基于纯CSS媒体查询，对于任何想要不使用Twitter Bootstrap开发类似解决方案的人来说，它们都是一个很好的起点。

- eterps

---

对我来说令人困惑的是，「适当的固定宽度」示例会随着浏览器窗口大小的改变而更改列的大小（因为它是响应式的吗？）。「适当的流动宽度」示例也是如此。但我想「流动宽度」示例是持续进行的，而「固定宽度响应式」示例则是以离散跳跃的方式进行的，并且达到了最大尺寸？是这样吗？那么，流体响应式和不响应式呢？ - jrochkind

明白了。在固定宽度布局中，当浏览器窗口达到媒体查询定义的宽度时，列会改变。因此，当您的窗口大于960像素宽时，它将保持在最大宽度。然后，当您将浏览器缩小到959像素时，它将根据一个具有最大宽度768像素的媒体查询自动切换到新的布局。因此，由于您正在查看固定宽度布局，当您的浏览器宽度在768到960之间时，列不会改变。 - eterps

当您查看流体布局时，列的大小将始终随着浏览器宽度的变化而改变。 布局本身也会根据媒体查询而发生变化，就像固定宽度布局一样。 - eterps

记住的最重要的一点是，固定宽度=像素，流动宽度=百分比。响应性来自于在bootstrap-responsive.css中定义的所有花哨的CSS规则，这些规则适用于两种布局。 - eterps

是的，我在测试时也发现了。我猜文档有责任（再次？:0） - 看起来似乎只有 fluid 可以包含它。谢谢 :) - Jonatan Littke

Answer 2

非常有趣的讨论。我也在思考这个问题。流式布局和固定布局的主要区别是固定布局在整个网站（视口）的布局中具有固定宽度。如果你的视口宽度为960像素，则每列都有一个固定宽度，这个宽度将永远不会改变。

流式布局的表现方式不同。想象一下，你已经将主要布局的宽度设置为100%。现在每个列只会根据它的相对大小（例如25%）进行计算，并随着浏览器的调整而拉伸。因此，基于你的布局目的，你可以选择布局的行为方式。

这里有一篇关于流式布局与弹性布局的好文章(点击链接)。

- Lido

Answer 3

来源 - http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

优点

• 固定宽度布局在设计方面更易于使用和自定义。
• 对于固定宽度的图像、表单、视频和其他内容，各种浏览器的宽度都是相同的，因此没有什么麻烦。
• 无需使用min-width或max-width，这也并不是每个浏览器都支持。
• 即使网站被设计为兼容最小屏幕分辨率800×600，内容在更大的分辨率下仍然足够宽，容易阅读。

缺点

• 对于具有较大屏幕分辨率的用户，固定宽度布局可能会产生过多的空白区域，从而破坏“神圣比例”、“三分法则”等整体平衡和设计原则。
• 根据固定布局的宽度，较小的屏幕分辨率可能需要水平滚动条。
• 必须使用无缝纹理、图案和图像延续来适应具有较大分辨率的用户。
• 总体而言，固定宽度布局在可用性方面得分较低。

- Thilanka De Silva

Answer 4

Bootstrap 3中的流体布局。

与Bootstrap 2不同，Bootstrap 3没有.container-fluid混合来创建流体容器。.container是一个固定宽度的响应式网格布局。在大屏幕上，网页内容两侧有过多的空白。

container-fluid在Bootstrap 3.1中被重新添加。

流体网格布局使用所有屏幕宽度，在大屏幕上效果更好。事实证明，使用Bootstrap 3的mixin很容易创建流体网格布局。以下代码可以创建流体响应式网格布局：

.container-fixed;

.container-fixed mixin将内容设置为屏幕中央并添加填充。它不指定固定页面宽度。

另一种方法是使用Eric Flowers的CSS样式

.my-fluid-container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

- Ying

---

我不明白为什么人们一直说在Bootstrap 3中不支持'container-fluid'，而实际上是支持的。我刚刚进行了双重检查，在Bootstrap 3.1.0中它被清晰地定义了。 - bart

这是因为它在3版本中被移除了，但在3.1版本中又被加回来了（参见 https://github.com/twbs/bootstrap/commit/6273604601c58284f49b38ae4e52533b9689437c）。 - Steve Klösters

Answer 5

你可以使用这个 - https://github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid。看一下..我发现这个非常有用。性能好，非常轻量级，所有重要的浏览器友好和自身流畅，所以你不需要Bootstrap来构建网格。

- enthusiast

---

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅链接的答案可能会失效。- 来自审查 - piet.t

我同意...但这不是对答案的引用，这是一个插件的链接，可以在那里下载文件，我想我不能在这里附加文件到答案中。 - enthusiast