基于Twitter Bootstrap的响应式设计中的流体或固定网格系统

我对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;
}

2014-02-24 17:43:40

其他回答

有趣的讨论。我也问过自己这个问题。流动和固定的主要区别在于，固定的布局在整个网站布局(视口)方面具有固定的宽度。如果你有一个960px宽度的视口，每一列都有一个固定的宽度，永远不会改变。

流体布局表现不同。假设你将主布局的宽度设置为100%宽度。现在，每一列将只计算它的相对大小(即25%)，并随着浏览器的大小被调整而拉伸。基于你的布局目的你可以选择布局的行为。

这里有一篇关于流动性和弹性的好文章。

2012-09-07 20:43:16

当你决定在固定宽度和流动宽度之间，你需要考虑你的整个页面。一般来说，你想要选择其中一个，而不是两个。事实上，你在问题中列出的例子都在同一个固定宽度的页面中。换句话说，脚手架页面使用固定宽度的布局。脚手架页面上的固定网格和流体网格并不是示例，而是实现固定宽度和流体宽度布局的文档。

适当的固定宽度示例如下。适当的流体宽度示例如下。

当观察固定宽度的例子时，当你的浏览器宽度大于960px时，你不应该看到内容改变大小。这是页面的最大(固定)宽度。固定宽度设计中的媒体查询将为特定样式指定最小宽度。当您缩小浏览器窗口并看到布局捕捉到不同的大小时，您将看到这一点。

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

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

以前，在自举2中，必须在流体容器中使用行流体，在固定容器中使用行流体。随着bootstrap 3的引入，行流体被移除，不要再使用它。

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

流体非响应式布局，流体响应式布局，固定无响应的布局，固定响应式布局。

这些技巧完全不需要Bootstrap，基于纯CSS媒体查询，对于任何愿意在不使用Twitter Bootstrap的情况下制作类似解决方案的人来说，这是一个很好的起点。

2012-03-27 20:31:00

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

2015-11-16 07:46:07

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

Pros

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

Cons

固定宽度的布局可能会为屏幕分辨率较大的用户创造过多的空白空间，从而破坏“神圣比例”、“三分法则”、整体平衡和其他设计原则。较小的屏幕分辨率可能需要水平滚动条，这取决于固定布局的宽度。无缝的纹理，图案和图像延续需要适应那些较大的分辨率。固定宽度的布局在可用性方面通常得分较低。

2013-06-18 08:13:15