406

我对twitter bootstrap grid中的各种选项以及它们如何组合在一起感到困惑。

首先，您可以有一个普通的 fixedcontainer或container-fluid.

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

然后最重要的是，您可以包含或不包含“响应式”媒体查询。

我对这些东西如何相互作用感到困惑。但让我们从一个明显的例子开始。

在示例页面本身，有一个固定网格和流体网格的示例

但是，在我的浏览器中，在该示例页面本身上——两个网格的行为相同。也许是因为示例页面使用了可选的响应式媒体查询？在这两个网格示例中，如果我开始逐渐缩小浏览器窗口，则网格元素不会逐渐变窄——一旦达到某个（响应）边界宽度，它们就会捕捉到更小的尺寸，然后再次捕捉到更大的边界宽度。但是普通的“固定”示例和“流体”示例在这里的行为完全相同——那么到底有什么区别呢？

4

5 回答 5

444

当您在固定宽度和流动宽度之间做出决定时，您需要考虑您的整个页面。通常，您想选择其中之一，但不能同时选择两者。实际上，您在问题中列出的示例在同一个固定宽度页面中。换句话说，Scaffolding 页面使用的是固定宽度的布局。脚手架页面上的固定网格和流体网格并不是示例，而是用于实现固定和流体宽度布局的文档。

正确的固定宽度示例在这里。正确的流体宽度示例在这里。

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

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

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

以前，在引导程序 2 中，您必须row-fluid在流体容器和row固定容器内使用。随着 bootstrap 3 的引入，row-fluid被移除，不再使用它。

编辑：根据评论，一些jsFiddles用于：

这些小提琴完全没有 Bootstrap，基于纯 CSS 媒体查询，这使它们成为一个很好的起点，对于任何愿意在不使用 Twitter Bootstrap 的情况下制作类似解决方案的人来说。

于 2012-03-27T20:31:00.613 回答
21

有趣的讨论。我也在问自己这个问题。流体和固定之间的主要区别只是固定布局在网站的整个布局（视口）方面具有固定的宽度。如果您有一个 960 像素宽度的视口，则每个列都有一个永远不会改变的固定宽度。

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

这是一篇关于流体与柔性的好文章。

于 2012-09-07T20:43:16.477 回答
7

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

优点

  • 固定宽度布局在设计方面更易于使用和定制。
  • 每个浏览器的宽度都是相同的，因此固定宽度的图像、表单、视频和其他内容的麻烦更少。
  • 不需要最小宽度或最大宽度，反正不是每个浏览器都支持。
  • 即使网站设计为兼容最小的屏幕分辨率 800×600，在更大的分辨率下内容仍然足够宽以易于阅读。

缺点

  • 固定宽度的布局可能会给屏幕分辨率较大的用户留下过多的空白，从而破坏“神圣比例”、“三分法”、整体平衡等设计原则。
  • 较小的屏幕分辨率可能需要水平滚动条，具体取决于固定布局的宽度。
  • 需要无缝纹理、图案和图像连续性以适应具有更大分辨率的那些。
  • 在可用性方面，固定宽度布局的总体得分通常较低。
于 2013-06-18T08:13:15.533 回答
6

Bootstrap 3 中的流体布局。

与 Boostrap 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;
}
于 2014-02-24T17:43:40.687 回答
-2

你可以使用这个 - https://github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid。看看.. 我发现这个真的很有用。良好的性能，非常轻的重量，所有重要的浏览器友好和流畅，所以你真的不需要网格的引导程序。

于 2015-11-16T07:46:07.040 回答