本文共 7648 字，大约阅读时间需要 25 分钟。

本文翻译自：

Just downloaded 3.1 and found in the docs... 刚下载3.1并在文档中找到...

Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .container-fluid . 通过将最外面的.container更改为.container-fluid将任何固定宽度的网格布局转换为全宽布局。

Looking in bootstrap.css , it appears that .container-fluid is identical to .container . 查看bootstrap.css ，看起来.container-fluid与.container相同。 Both have the same CSS, and every instance of .container-fluid is paired with .container , and all column classes are specified in percentages. 两者具有相同的CSS，和每一个实例.container-fluid是搭配.container ，以及所有列类百分比规定。

When twiddling with examples I could not see any difference, as everything seemed fluid. 当看到示例时，我看不出任何差异，因为一切看起来都很流畅。

As I'm new to Bootstrap, I assume I'm missing something. 由于我是Bootstrap的新手，我认为我错过了一些东西。 Could someone take a minute and enlighten me? 有人可以花点时间开导我吗？

#1楼

参考：

#2楼

I think you are saying that a container vs container-fluid is the difference between responsive and non-responsive to the grid. 我想你是说container与container-fluid是响应和不响应网格之间的区别。 This is not true...what is saying is that the width is not fixed...its full width! 这不是真的...说的是宽度不固定......它的全宽！

This is hard to explain so lets look at the examples 这很难解释，所以让我们看看这些例子

Example one 例一

container-fluid : container-fluid ：

So you see how the container takes up the whole screen...that's a container-fluid . 所以你看到容器如何占据整个屏幕......这是一个container-fluid 。

Now lets look at the other just a normal container and watch the edges of the preview 现在让我们看看另一个只是一个普通的container并观察预览的边缘

Example two 例二

container

Now do you see the white space in the example? 现在你看到示例中的空白区域了吗？ That's because its a fixed width container ! 那是因为它是一个固定宽度的container ！ It might make more sense to open both examples up in two different tabs and switch back and forth. 在两个不同的选项卡中打开这两个示例并来回切换可能更有意义。

EDIT 编辑

Better yet here is an example with both containers at once! 更好的是这里有两个容器的例子！ Now you can really tell the difference! 现在你可以真正分辨出来！

I hope this helped clarify a little bit! 我希望这有助于澄清一点！

#3楼

Quick version: .container has one fixed width for each screen size in bootstrap (xs,sm,md,lg); 快速版： .container在bootstrap（xs，sm，md，lg）中为每个屏幕大小设置一个固定宽度; .container-fluid expands to fill the available width. .container-fluid扩展以填充可用宽度。

The difference between container and container-fluid comes from these lines of CSS: container和container-fluid之间的区别来自这些CSS：

@media (min-width: 568px) {  .container {    width: 550px;  }}@media (min-width: 992px) {  .container {    width: 970px;  }}@media (min-width: 1200px) {  .container {    width: 1170px;  }}

Depending on the width of the viewport that the webpage is being viewed on, the container class gives its div a specific fixed width. 根据正在查看网页的视口的宽度， container类为其div提供特定的固定宽度。 These lines don't exist in any form for container-fluid , so its width changes every time the viewport width changes. 这些线对于container-fluid不存在任何形式，因此每次视口宽度更改时其宽度都会更改。

So for example, say your browser window is 1000px wide. 例如，假设您的浏览器窗口宽度为1000px。 As it's greater than the min-width of 992px, your .container element will have a width of 970px. 因为它大于992px的最小宽度，所以.container元素的宽度为970px。 You then slowly widen your browser window. 然后慢慢扩大浏览器窗口。 The width of your .container won't change until you get to 1200px, at which it will jump to 1170px wide and stay that way for any larger browser widths. 你的.container的宽度不会改变，直到达到1200px，它将跳到1170px宽，并保持任何更大的浏览器宽度。

Your .container-fluid element, on the other hand, will constantly resize as you make even the smallest changes to your browser width. 另一方面，您的.container-fluid元素将不断调整大小，因为您对浏览器宽度进行了最小的更改。

#4楼

Both .container and .container-fluid are responsive (ie they change the layout based on the screen width), but in different ways (I know, the naming doesn't make it sound that way). .container和.container-fluid都是响应式的（即它们会根据屏幕宽度改变布局），但是以不同的方式（我知道，命名不会让它听起来那样）。

Short Answer: 简答：

.container is jumpy / choppy resizing, and .container是一个跳跃/波涛汹涌的大小调整，和

.container-fluid is continuous / fine resizing at width: 100%. .container-fluid在宽度：100％时连续/精细调整大小。

From a functionality perspective: 从功能角度来看：

.container-fluid continuously resizes as you change the width of your window/browser by any amount, leaving no extra empty space on the sides ever, unlike how .container does. 当你改变窗口/浏览器的宽度时， .container-fluid不断调整大小，不会像.container那样在两侧留下额外的空白空间。 (Hence the naming: "fluid" as opposed to "digital", "discrete", "chunked", or "quantized"). （因此命名：“流动”而不是“数字”，“离散”，“分块”或“量化”）。

.container resizes in chunks at several certain widths. .container在几个特定宽度的块中调整大小。 In other words, it will be different specific aka "fixed" widths different ranges of screen widths. 换句话说，它将是不同的特定的“固定”宽度，不同的屏幕宽度范围。

Semantics: "fixed width" 语义：“固定宽度”

You can see how naming confusion can arise. 您可以看到命名混淆是如何产生的。 Technically, we can say .container is "fixed width", but it is fixed only in the sense that it doesn't resize at every granular width. 从技术上讲，我们可以说.container是“固定宽度”，但它只是在它没有在每个粒度宽度调整大小的意义上是固定的。 It's actually not "fixed" in the sense that it's always stays at a specific pixel width, since it actually can change size. 它实际上并不是“固定的”，因为它总是保持在特定的像素宽度，因为它实际上可以改变大小。

From a fundamental perspective: 从基本面来看：

.container-fluid has the CSS property width: 100%; .container-fluid的CSS属性width: 100%; , so it continually readjusts at every screen width granularity. ，因此它会不断调整每个屏幕宽度的粒度。

.container-fluid {  width: 100%;}

.container has something like "width = 800px" (or em, rem etc.), a specific pixel width value at different screen widths. .container有类似“width = 800px”（或em，rem等）的东西，不同屏幕宽度的特定像素宽度值。 This of course is what causes the element width to abruptly jump to a different width when the screen width crosses a screen width threshold. 当然，当屏幕宽度超过屏幕宽度阈值时，这会导致元素宽度突然跳转到不同的宽度。 And that threshold is governed by CSS3 media queries, which allow you to apply different styles for different conditions, such as screen width ranges. 该阈值由CSS3媒体查询控制，允许您针对不同条件应用不同的样式，例如屏幕宽度范围。

@media screen and (max-width: 400px){  .container {    width: 123px;  }}@media screen and (min-width: 401px) and (max-width: 800px){  .container {    width: 456px;  }}@media screen and (min-width: 801px){  .container {    width: 789px;  }}

Beyond 外

You can make any fixed widths element responsive via media queries, not just .container elements, since media queries is exactly how .container is implemented by bootstrap in the background (see JKillian's answer for the code). 您可以通过媒体查询，不只是响应任何固定宽度的元素.container元素，因为媒体的质疑是究竟如何.container是由后台引导（见JKillian对代码的答案）来实现。

#5楼

You are right in 3.1 .container-fluid and .container are same and works like container but if you remove them it works like .container-fluid (full width). 你是对的3.1 .container-fluid和.container是相同的，并且像容器一样工作，但如果你删除它们就像.container-fluid（全宽）。 They had removed .container-fluid for "Mobile First Approach", but now it's back in 3.3.4 (and they will work differently) 他们已经删除了“移动优先方法”的.container-fluid，但现在又回到了3.3.4（并且它们将以不同的方式工作）

To get latest bootstrap please read this post on stackoverflow it will help . 要获得最新的bootstrap，请阅读stackoverflow上的这篇文章，它将有助于 。

#6楼

.container has a max width pixel value, whereas .container-fluid is max-width 100%. .container具有最大宽度像素值，而.container-fluid的最大宽度为100％。

.container-fluid continuously resizes as you change the width of your window/browser by any amount. 当您更改窗口/浏览器的宽度时， .container-fluid不断调整大小。

.container resizes in chunks at several certain widths, controlled by media queries (technically we can say it's “fixed width” because pixels values are specified, but if you stop there, people may get the impression that it can't change size – ie not responsive.) .container在几个特定宽度的块中调整大小，由媒体查询控制（从技术上讲，我们可以说它是“固定宽度”，因为像素值被指定，但是如果你停在那里，人们可能会得到它不能改变大小的印象 - 即没有回应。）

转载地址：http://upcnb.baihongyu.com/