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

我对推特自举网格中的各种选项以及它们是如何组合在一起感到困惑。

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

然后其中任何一个都可以包含普通的row或流动行row-fluid。也就是说，可以使用带有流体行的固定容器或容器流体…用一个固定的行?

然后在此之上，你可以包含“响应式”媒体查询，或者不包含。

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

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

然而，在我的浏览器中，在示例页面本身，两个网格的行为是相同的。也许是因为示例页面使用了可选的响应式媒体查询?在这两个网格示例中，如果我开始逐渐缩小浏览器窗口，网格元素不就会逐渐变窄——一旦达到一定的(响应式)边界宽度，它们就会缩小，然后在进一步的边界宽度处再次缩小。但普通的“固定”示例和“流动”示例在这里表现完全相同——所以有什么区别呢?

177889 次浏览
小开

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

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

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

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

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

以前，在引导2中，你必须在流体容器中使用row-fluid，在固定容器中使用row。随着引导3的引入，row-fluid被删除，不再使用它. 0被删除。

编辑:根据注释，一些jsFiddles用于:

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

小开

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

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

这里是一篇关于流动vs.弹性的好文章。

小开

来源- 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，在更大的分辨率下，内容仍然足够宽，易于阅读。

缺点

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

引导3中的流体布局。

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

container-fluid在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;
}
小开

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


提交答案