twitter-bootstrap 容器流体与 .container

Container-fluid vs .container

提问by FatFingers

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 .containerto .container-fluid.

通过将最外层更改.container为.container-fluid.

Looking in bootstrap.css, it appears that .container-fluidis identical to .container. Both have the same CSS, and every instance of .container-fluidis paired with .container, and all column classes are specified in percentages.

往里看bootstrap.css，好像.container-fluid是一样的.container。两者具有相同的 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. Could someone take a minute and enlighten me?

因为我是 Bootstrap 的新手，所以我认为我错过了一些东西。有人可以花一点时间来启发我吗？

回答by JKillian

Quick version:.containerhas one fixed width for each screen size in bootstrap (xs,sm,md,lg); .container-fluidexpands to fill the available width.

快速版本：.containerbootstrap 中每个屏幕尺寸都有一个固定宽度（xs,sm,md,lg）；.container-fluid扩展以填充可用宽度。

---

---

The difference between containerand container-fluidcomes 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 containerclass gives its div a specific fixed width. These lines don't exist in any form for container-fluid, so its width changes every time the viewport width changes.

根据查看网页的视口的宽度，container该类为其 div 提供特定的固定宽度。这些线不以任何形式存在container-fluid，因此每次视口宽度更改时其宽度都会更改。

So for example, say your browser window is 1000px wide. As it's greater than the min-width of 992px, your .containerelement will have a width of 970px. You then slowly widen your browser window. The width of your .containerwon't change until you get to 1200px, at which it will jump to 1170px wide and stay that way for any larger browser widths.

例如，假设您的浏览器窗口宽 1000 像素。由于它大于 992px 的最小宽度，因此您的.container元素将具有 970px 的宽度。然后慢慢地扩大浏览器窗口。您的宽度在.container达到 1200 像素之前不会改变，此时它将跳转到 1170 像素宽度，并在任何更大的浏览器宽度上保持这种状态。

Your .container-fluidelement, on the other hand, will constantly resize as you make even the smallest changes to your browser width.

你的.container-fluid元素，而另一方面，将不断调整，你赚你的浏览器的宽度变化最小。

回答by oueasley

I think you are saying that a containervs container-fluidis the difference between responsive and non-responsive to the grid. This is not true...what is saying is that the width is not fixed...its full width!

我想你是说 a containervscontainer-fluid是对网格的响应和非响应之间的区别。这不是真的……说的是宽度不是固定的……它的全宽！

This is hard to explain so lets look at the examples

这很难解释，所以让我们看一下例子

---

---

Example one

示例一

container-fluid:

container-fluid：

http://www.bootply.com/119981

http://www.bootply.com/119981

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 containerand watch the edges of the preview

现在让我们看看另一个只是正常的container，看看预览的边缘

Example two

示例二

container

container

http://www.bootply.com/119982

http://www.bootply.com/119982

Now do you see the white space in the example? That's because its a fixed width container! It might make more sense to open both examples up in two different tabs and switch back and forth.

现在您看到示例中的空白了吗？那是因为它的宽度是固定的container！在两个不同的选项卡中打开两个示例并来回切换可能更有意义。

EDIT

编辑

Better yet here is an example with both containers at once! Now you can really tell the difference!

更好的是，这是一个同时包含两个容器的示例！现在你真的可以分辨出区别了！

http://www.bootply.com/119983

http://www.bootply.com/119983

I hope this helped clarify a little bit!

我希望这有助于澄清一点！

回答by ahnbizcad

Both .containerand .container-fluidare responsive (i.e. 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:

简答：

.containeris jumpy / choppy resizing, and

.container是跳跃/断断续续的调整大小，和

.container-fluidis continuous / fine resizing at width: 100%.

.container-fluid在宽度：100% 处连续/精细调整大小。

From a functionality perspective:

从功能的角度来看：

.container-fluidcontinuously resizes as you change the width of your window/browser by any amount, leaving no extra empty space on the sides ever, unlike how .containerdoes. (Hence the naming: "fluid" as opposed to "digital", "discrete", "chunked", or "quantized").

.container-fluid当您以任意数量更改窗口/浏览器的宽度时，它会不断调整大小，而不会在两侧留下额外的空白空间，这与如何.container做到不同。（因此命名为：“流体”而不是“数字”、“离散”、“分块”或“量化”）。

.containerresizes in chunks at several certain widths. In other words, it will be different specific aka "fixed" widths different ranges of screen widths.

.container在几个特定宽度的块中调整大小。换句话说，屏幕宽度的不同范围将是不同的特定又名“固定”宽度。

Semantics: "fixed width"

语义：“固定宽度”

You can see how naming confusion can arise. Technically, we can say .containeris "fixed width", but it is fixed only in the sense that it doesn't resize at every granular width. It's actually not "fixed" in the sense that it's always stays at a specific pixel width, since it actually can change size.

您可以看到命名混淆是如何产生的。从技术上讲，我们可以说.container是“固定宽度”，但它只是在它不会在每个粒度宽度上调整大小的意义上说是固定的。它实际上不是“固定”的，因为它总是保持在特定的像素宽度，因为它实际上可以改变大小。

From a fundamental perspective:

从基本面来看：

.container-fluidhas the CSS property width: 100%;, so it continually readjusts at every screen width granularity.

.container-fluid具有 CSS 属性width: 100%;，因此它会在每个屏幕宽度粒度上不断重新调整。

.container-fluid {
  width: 100%;
}

.containerhas something like "width = 800px" (or em, rem etc.), a specific pixel width value at different screen widths. 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.

.container有类似“width = 800px”（或em、rem等）的东西，不同屏幕宽度下的特定像素宽度值。这当然是导致元素宽度在屏幕宽度超过屏幕宽度阈值时突然跳转到不同宽度的原因。该阈值由 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 .containerelements, since media queries is exactly how .containeris implemented by bootstrap in the background (see JKillian's answer for the code).

您可以通过媒体查询使任何固定宽度的元素响应，而不仅仅是.container元素，因为媒体查询正是.container引导程序在后台实现的（请参阅 JKillian 对代码的回答）。

回答by taimur alam

Use .container-fluidwhen you want your page to shapeshift with every little differencein its viewport size.

使用.container-fluid时，您希望您的网页变身每相差不大在其视口大小。

Use .containerwhen you want your page to shapeshift to only 4 kinds of sizes, which are also known as "breakpoints".

使用.container时，您希望您的网页变身只有4种尺寸，这也被称为“断点”。

The breakpoints corresponding to their sizes are:

与它们的大小相对应的断点是：

• Extra Small: (Only Mobile Resolution)
• Small: 768px (Tablets)
• Medium: 992px (Laptops)
• Large: 1200px (Laptops/Desktops)

• 超小：（仅移动分辨率）
• 小：768px（平板电脑）
• 中：992px（笔记本电脑）
• 大：1200 像素（笔记本电脑/台式机）

回答by Zim

Updated 2019

2019 年更新

The basic difference is that containeris scales responsively, while container-fluidis always width:100%. Therefore in the root CSS definitions, they appear the same, but if you look further you'll see that .containeris bound to media queries.

基本的区别是container响应性地缩放，而container-fluid总是width:100%。因此，在根 CSS 定义中，它们看起来是一样的，但如果你进一步看，你会看到它.container绑定到媒体查询。

Bootstrap 4

引导程序 4

The containerhas 5 widths...

将container有5米宽度...

.container {
  width: 100%;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

Bootstrap 3

引导程序 3

The containerhas 4 sizes. Full width on xsscreens, and then it's width varies based on the following media queries..

将container有4种尺寸。xs屏幕上的全宽，然后它的宽度根据以下媒体查询而变化..

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

container vs. container-fluid demo

容器与容器流体演示

回答by Sayali

.containerhas a max width pixel value, whereas .container-fluidis max-width 100%.

.container具有最大宽度像素值，而.container-fluid最大宽度为 100%。

.container-fluidcontinuously resizes as you change the width of your window/browser by any amount.

.container-fluid当您以任意数量更改窗口/浏览器的宽度时，会不断调整大小。

.containerresizes 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 – i.e. not responsive.)

.container在几个特定宽度的块中调整大小，由媒体查询控制（从技术上讲，我们可以说它是“固定宽度”，因为像素值是指定的，但如果你停在那里，人们可能会觉得它不能改变大小——即没有响应.)

回答by TrtlBoy

From a display perspective .containergives you more control over the what the users are seeing, and makes it easier to see what the users will see as you only have 4 variations of display (5 in the case of bootstrap 5) because the sizes relate to the same as the grid sizes. e.g. .col-xs, .col-sm, .col, and .col-lg.

从显示的角度来看.container，您可以更好地控制用户看到的内容，并且更容易看到用户将看到的内容，因为您只有 4 种显示变体（在引导程序 5 的情况下为 5），因为大小与与网格大小相同。例如.col-xs, .col-sm, .col, 和.col-lg。

What this means, is that when you are doing user testing if you test on a displays with the 4 different sizes you see all the veriations in display.

这意味着，当您进行用户测试时，如果您在具有 4 种不同尺寸的显示器上进行测试，您会在显示器上看到所有版本。

When using .container-fluidbecause the witdh is related to the viewport width the display is dynamic, so the varations are much greater and users with very large screens or uncommon screen widths may see results you weren't expecting.

使用时，.container-fluid因为 witdh 与视口宽度相关，显示是动态的，所以变化要大得多，屏幕非常大或不常见的屏幕宽度的用户可能会看到您意想不到的结果。

回答by Deep

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). They had removed .container-fluid for "Mobile First Approach", but now it's back in 3.3.4 (and they will work differently)

你是对的 3.1 .container-fluid 和 .container 是相同的并且像容器一样工作，但如果你删除它们，它就像 .container-fluid （全宽）。他们已经删除了“移动优先方法”的 .container-fluid，但现在它又回到了 3.3.4（他们的工作方式会有所不同）

To get latest bootstrap please read this post on stackoverflow it will help check it out.

要获得最新的引导程序，请阅读有关 stackoverflow 的这篇文章，这将有助于查看。