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

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不以任何形式存在，因此每次视口宽度改变时它的宽度都会改变。

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

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

Answer 2

我认为您是说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

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

Answer 3

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

简答：

.container是跳跃/ .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

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

容器与容器流体演示

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，但现在它又回到了 3.3.4（他们的工作方式会有所不同）

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