流体或固定网格系统，采用响应式设计，基于Twitter Bootstrap

本文翻译自：Fluid or fixed grid system, in responsive design, based on Twitter Bootstrap

I'm getting confused about the various options in the twitter bootstrap grid , and how they go together. 我对twitter bootstrap网格中的各种选项以及它们如何组合起来感到困惑。

To begin with, you can have an ordinary fixed container , or a container-fluid . 首先，您可以使用普通的固定container或container-fluid 。

Then either one can include either an ordinary row , or a fluid row, row-fluid . 然后，任何一个都可以包括普通row或流体行， row-fluid 。 That is, you can have a fixed container with a fluid row, or a container-fluid... with a fixed row? 也就是说，你可以拥有一个带有流体排的固定容器，或一个带有固定排的容器流体......

Then on top of that, you can include the 'responsive' media queries, or not. 然后，您可以在其中包含“响应式”媒体查询。

I am getting confused as to how these things interact. 我对这些事情如何相互作用感到困惑。 But let's start with one obvious example. 但让我们从一个明显的例子开始。

On the examples page itself, there's what's presented as an example of both a fixed grid and a fluid grid 在示例页面本身，有一个固定网格和流体网格的例子

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? 但是普通的“固定”示例和“流动”示例在这里表现完全相同 - 那么差异究竟是什么呢？

---

#1楼

参考：https://stackoom.com/question/f2JJ/流体或固定网格系统-采用响应式设计-基于Twitter-Bootstrap

---

#2楼

Interesting discussion. 有趣的讨论。 I was asking myself this question too. 我也问自己这个问题。 The main difference between fluid and fixed is simply that the fixed layout has a fixed width in terms of the whole layout of the website (viewport). 流体和固定之间的主要区别在于，固定布局在网站（视口）的整个布局方面具有固定的宽度。 If you have a 960px width viewport each colum has a fixed width which will never change. 如果您有一个960px宽度的视口，则每个列都有一个固定的宽度，永远不会改变。

The fluid layout behaves different. 流体布局表现不同。 Imagine you have set the width of your main layout to 100% width. 想象一下，您已将主布局的宽度设置为100％宽度。 Now each column will only be calculated to it's relative size (ie 25%) and streches as the browser will be resized. 现在每个列只会计算它的相对大小（即25％）和streches，因为浏览器将调整大小。 So based on your layout purpose you can select how your layout behaves. 因此，根据您的布局目的，您可以选择布局的行为方式。

Here is a good article about fluid vs. flex . 这是一篇关于流体与柔韧的好文章 。

---

#3楼

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

Pros 优点

• Fixed-width layouts are much easier to use and easier to customize in terms of design. 固定宽度布局更易于使用，并且在设计方面更易于定制。
• Widths are the same for every browser, so there is less hassle with images, forms, video and other content that are fixed-width. 每个浏览器的宽度都相同，因此图像，表单，视频和其他固定宽度的内容的麻烦更少。
• There is no need for min-width or max-width, which isn't supported by every browser anyway. 不需要min-width或max-width，但是每个浏览器都不支持。
• Even if a website is designed to be compatible with the smallest screen resolution, 800×600, the content will still be wide enough at a larger resolution to be easily legible. 即使网站设计为与最小屏幕分辨率（800×600）兼容，内容仍然足够宽，分辨率更高，易于辨认。

Cons 缺点

• A fixed-width layout may create excessive white space for users with larger screen resolutions, thus upsetting “divine proportion,” the “Rule of Thirds,” overall balance and other design principles. 固定宽度的布局可能会为屏幕分辨率较高的用户创造过多的空白区域，从而扰乱“神圣比例”，“三分法则”，整体平衡和其他设计原则。
• Smaller screen resolutions may require a horizontal scroll bar, depending the fixed layout's width. 较小的屏幕分辨率可能需要水平滚动条，具体取决于固定布局的宽度。
• Seamless textures, patterns and image continuation are needed to accommodate those with larger resolutions. 需要无缝纹理，图案和图像延续以适应具有更大分辨率的那些。
• Fixed-width layouts generally have a lower overall score when it comes to usability. 固定宽度布局在可用性方面通常具有较低的总分。

---

#4楼

Fluid layout in Bootstrap 3. Bootstrap 3中的流体布局。

Unlike Boostrap 2, Bootstrap 3 doesn't have a .container-fluid mixin to make a fluid container. 与Boostrap 2不同，Bootstrap 3没有.container-fluid mixin来制造流体容器。 The .container is a fixed width responsive grid layout. .container是固定宽度响应网格布局。 In a large screen, there are excessive white spaces in both sides of one's Web page content. 在大屏幕中，一个网页内容的两侧都有过多的空白区域。

container-fluid is added back in Bootstrap 3.1 在Bootstrap 3.1中添加container-fluid

A fluid grid layout uses all screen width and works better in large screen. 流体网格布局使用所有屏幕宽度，并在大屏幕中更好地工作。 It turns out that it is easy to create a fluid grid layout using Bootstrap 3 mixins. 事实证明，使用Bootstrap 3 mixins创建流畅的网格布局很容易。 The following line makes a fluid responsive grid layout: 以下行生成流体响应网格布局：

.container-fixed; .container固定;

The .container-fixed mixin sets the content to the center of the screen and add paddings. .container-fixed mixin将内容设置为屏幕中心并添加填充。 It doesn't specifies a fixed page width. 它没有指定固定的页面宽度。

Another approach is to use Eric Flowers' CSS style 另一种方法是使用Eric Flowers的CSS风格

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

---

#5楼

you may use this - https://github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid. 你可以使用这个 - https://github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid。 have a look.. I found this one really very useful. 看看..我发现这个非常有用。 Good performance, very light weight, all important browser friendly and fluid in itself, so you don't really need bootstrap for the grid. 良好的性能，非常轻的重量，所有重要的浏览器友好和流畅本身，所以你真的不需要为网格引导。

---

#6楼

When you decide between fixed width and fluid width you need to think in terms of your ENTIRE page. 当您决定固定宽度和流体宽度时，您需要根据您的整个页面进行思考。 Generally, you want to pick one or the other, but not both. 通常，您想要选择其中一个，但不是两个。 The examples you listed in your question are, in-fact, in the same fixed-width page. 您在问题中列出的示例实际上是在相同的固定宽度页面中。 In other words, the Scaffolding page is using a fixed-width layout. 换句话说，Scaffolding页面使用固定宽度的布局。 The fixed grid and fluid grid on the Scaffolding page are not meant to be examples, but rather the documentation for implementing fixed and fluid width layouts. Scaffolding页面上的固定网格和流体网格不是示例，而是用于实现固定和流体宽度布局的文档。

The proper fixed width example is here . 适当的固定宽度示例在这里 。 The proper fluid width example is here . 适当的流体宽度示例在这里 。

When observing the fixed width example, you should not see the content changing sizes when your browser is greater than 960px wide. 观察固定宽度示例时，如果浏览器宽度超过960px，则不应看到内容更改大小。 This is the maximum (fixed) width of the page. 这是页面的最大（固定）宽度。 Media queries in a fixed-width design will designate the minimum widths for particular styles. 固定宽度设计中的媒体查询将指定特定样式的最小宽度。 You will see this in action when you shrink your browser window and see the layout snap to a different size. 当您缩小浏览器窗口并看到布局捕捉到不同大小时，您将看到这一点。

Conversely, the fluid-width layout will always stretch to fit your browser window, no matter how wide it gets. 相反，流体宽度布局将始终拉伸以适合您的浏览器窗口，无论它有多宽。 The media queries indicate when the styles change, but the width of containers are always a percentage of your browser window (rather than a fixed number of pixels). 媒体查询指示样式何时更改，但容器的宽度始终是浏览器窗口的百分比（而不是固定数量的像素）。

The 'responsive' media queries are all ready to go. “响应式”媒体查询已准备就绪。 You just need to decide if you want to use a fixed width or fluid width layout for your page. 您只需要决定是否要为页面使用固定宽度或流体宽度布局。

Previously, in bootstrap 2, you had to use row-fluid inside a fluid container and row inside a fixed container. 以前，在bootstrap 2中，您必须在流体容器内使用row-fluid液并在固定容器内row 。 With the introduction of bootstrap 3, row-fluid was removed, do no longer use it . 随着bootstrap 3的引入， row-fluid被移除， 不再使用它 。

EDIT : As per the comments, some jsFiddles for: 编辑 ：根据评论，一些jsFiddles ：

• fluid non-responsive layout , 流畅的无响应布局 ，
• fluid responsive layout , 流体响应布局 ，
• fixed non-responsive layout , 修复无响应布局 ，
• fixed responsive layout . 固定的响应式布局

These fiddles are completely Bootstrap-free, based on pure CSS media queries, which makes them a good starting point, for anyone willing to craft similar solution without using Twitter Bootstrap. 这些小提琴完全没有Bootstrap，基于纯CSS媒体查询，对于任何愿意在不使用Twitter Bootstrap的情况下制作类似解决方案的人来说，这是一个很好的起点。