Question

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

将最外面的.container更改为.container-fluid，将任意固定宽度的网格布局转换为全宽布局。

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

当看到示例时，我看不出任何差异，因为一切看起来都很流畅。

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

Answer 1

快速版本： .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的任何形式存在，因此每次视口宽度更改时其宽度都会更改。

例如，假设您的浏览器窗口宽度为1000px。由于它大于992px的最小宽度，因此.container元素的宽度为970px。然后慢慢扩大浏览器窗口。 .container的宽度在达到1200px之前不会改变，在此范围内它会跳到1170px宽，并保持适用于任何更大的浏览器宽度。

另一方面，您的.container-fluid元素会不断调整大小，因为您对浏览器宽度进行了最小的更改。

Answer 2

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

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

示例一

container-fluid：

http://www.bootply.com/119981

所以你看到容器如何占据整个屏幕...那是一个container-fluid。

现在让我们看看另一个正常的container并观看预览的边缘

示例二

container

http://www.bootply.com/119982

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

修改

更好的是，这里有两个容器的例子！现在你可以真正分辨出来！

http://www.bootply.com/119983

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

Answer 3

.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对代码的回答）

Answer 4

当您希望页面在其视口大小中变形且每个小差异时，请使用.container-fluid。

如果您希望自己的网页变形只变为4种尺寸，请使用.container，这也称为“断点”。

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

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

Answer 5

2018年更新

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

Bootstrap 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

Answer 6

.container的最大宽度像素值，而.container-fluid的最大宽度为100％。

当您更改窗口/浏览器的宽度时，

.container-fluid会不断调整大小。

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

Answer 7

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

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

当使用.container-fluid因为witdh与视口宽度相关时，显示是动态的，因此变化更大，屏幕非常大或屏幕宽度不常见的用户可能会看到你不期望的结果

Answer 8

你在3.1 .container-fluid和.container是相同的，并且像容器一样工作，但是如果你删除它们就像.container-fluid（全宽）。他们已经删除了.container-fluid for＆＃34; Mobile First Approach＆＃34;，但现在又回到了3.3.4（他们的工作方式不同）

要获得最新的bootstrap，请阅读stackoverflow上的这篇文章，它将有助于 check it out 。

容器流体与容器

8 个答案: