容器流体与容器

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

通过改变你的最外圈任何固定宽度的网格布局成一个全宽度的布局.container来.container-fluid。

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

当与示例交流时，我看不出任何区别，因为一切似乎都是流畅的。

因为我是Bootstrap的新手，所以我想我缺少一些东西。有人可以花点时间启发我吗？

快速版本： .container在引导程序中，每个屏幕尺寸都有一个固定宽度（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像素。由于大于992px的最小宽度，因此您的.container元素的宽度为970px。然后，您慢慢扩大浏览器窗口。您的宽度.container直到您到达1200px时才会改变，在该位置上它将跳到1170px的宽度，并且对于任何更大的浏览器宽度都将保持这种状态。

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

我认为您是说containervs 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具有“宽度= 800像素”（或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时，您希望您的网页变身每相差不大在其视口大小。

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

与其大小相对应的断点为：

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

更新于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具有最大宽度像素值，而.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（全宽）一样工作。他们为“移动优先方法”删除了.container-fluid，但现在它又回到了3.3.4（并且它们的工作方式将有所不同）

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