本文翻譯自：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的情況下製作類似解決方案的人來說，這是一個很好的起點。