容器和容器流体类之间的区别是什么？

Question

刚刚下载了3.1并在文档中找到...

通过将最外层的.container更改为.container fluid，将任何固定宽度的网格布局转换为全宽度布局。

查看bootstrap.css，似乎.container fluid与.container相同。两者都有相同的CSS，并且.container fluid的每个实例都与.container配对，并且所有列类都以百分比指定。

当我玩弄这些例子时，我看不出有什么不同，因为一切似乎都是流动的。

由于我对Bootstrap还不熟悉，我想我错过了一些东西。谁能花点时间给我点化一下吗？

Answer 1

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

简短回答：

.container正在跳跃/起伏地调整大小，并且

.container fluid在宽度为100%时连续/精细调整大小。

从功能的角度来看：

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

。容器以若干特定宽度的块来调整大小。换句话说，不同的特定即"固定"宽度将是不同的屏幕宽度范围。

语义：“固定宽度”

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

从根本上看：

容器流体具有CSS属性宽度： 100%；所以它在每个屏幕宽度粒度上不断地重新调整。

.container-fluid {
  width: 100%;
}

容器有一些类似宽度=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的代码回答）。

Answer 2

我想你是说容器与容器流体是对网格有响应和无响应的区别。这不是真的…所说的是宽度不是固定的…它的全宽！

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

例一

容器流体：

http://www.bootply.com/119981

所以你可以看到容器是如何占据整个屏幕的...这是一个容器流体。

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

例子二

容器

http://www.bootply.com/119982

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

编辑

更好的是，这里有一个同时使用两个容器的html" target="_blank">示例！现在你真的可以看出区别了！

http://www.bootply.com/119983

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

Answer 3

快速版本：.container在引导中对每个屏幕大小有一个固定的宽度（xs、sm、md、lg）<代码>容器流体展开以填充可用宽度。

容器和容器流体之间的区别来自以下几行CSS：

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

根据正在查看网页的视口的宽度，container类为其div指定一个特定的固定宽度。对于容器流体，这些线不以任何形式存在，因此每次视口宽度更改时，其宽度都会更改。

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

另一方面，您的。容器流体元素将在您对浏览器宽度进行最小的更改时不断调整大小。