Bootstrap .container 和 .container-fluid 类有什么区别？

快速版： .container 在 bootstrap (xs,sm,md,lg) 中对每个屏幕尺寸都有一个固定宽度； .container-fluid 展开以填充可用宽度。

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;
  }
}

根据查看网页的视口宽度，container 类为其 div 提供特定的固定宽度。对于 container-fluid，这些行不以任何形式存在，因此每次视口宽度发生变化时，其宽度都会发生变化。

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

另一方面，您的 .container-fluid 元素会随着您对浏览器宽度的最小更改而不断调整大小。

---

我认为您是说 container 与 container-fluid 是对网格的响应式和非响应式之间的区别。这不是真的......说的是宽度不是固定的......它的全宽！

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

示例一

container-fluid：

http://www.bootply.com/119981

因此，您会看到容器如何占据整个屏幕...这是 container-fluid。

现在让我们看看另一个只是普通的 container 并观察预览的边缘

示例二

container

http://www.bootply.com/119982

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

编辑

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

http://www.bootply.com/119983

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

---

.container 和 .container-fluid 都是响应式的（即它们根据屏幕宽度更改布局），但方式不同（我知道，命名并不像那样）。

简短的回答：

.container 调整大小时跳跃/断断续续，并且

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

从功能角度：

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

.container 以若干特定宽度调整块的大小。换句话说，它将是不同的特定的又名“固定”宽度，不同的屏幕宽度范围。

语义：“固定宽度”

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

从基本面来看：

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

.container-fluid {
  width: 100%;
}

.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;
  }
}

超过

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

---

如果您希望页面在其视口大小上变形，请使用 .container-fluid。

如果您希望页面变形为仅 4 种尺寸（也称为“断点”），请使用 .container。

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

超小：（仅限移动分辨率）

小：768px（平板电脑）

中：992px（笔记本电脑）

大：1200px（笔记本电脑/台式机）

---

2019 年更新

基本区别在于 container 是响应式缩放，而 container-fluid 始终是 width:100%。因此，在根 CSS 定义中，它们看起来是相同的，但如果您进一步观察，您会发现 .container 绑定到媒体查询。

引导程序 4

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;
  }
}

引导程序 3

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

---

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

.container-fluid 在您随意更改窗口/浏览器的宽度时不断调整大小。

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

---

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

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

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

---

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

要获得最新的引导程序，请阅读 stackoverflow 上的这篇文章，它将对 check it out 有所帮助。

---