Bootstrap .container 和 .container-fluid 类有啥区别？

Posted 2023-02-16

【中文标题】Bootstrap .container 和 .container-fluid 类有啥区别？

【英文标题】：What is the difference between Bootstrap .container and .container-fluid classes?Bootstrap .container 和 .container-fluid 类有什么区别？

【发布时间】：2014-04-11 07:43:14

【问题描述】：

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

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

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

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

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

【问题讨论】：

我看到了那个。它被发布了几转。在 3.0 中取出 container-fluid，在 3.1 中重新添加。

@Ranveer 绝对不是重复的，因为这指的是 > BS3 即 BS2.3 - 由于该问题没有回答，请您删除以免混淆未来的用户

来自文档的流体覆盖了整个视口的宽度。 （或者是整个当前容器或包含元素的容器？）无论如何，为什么要命名流体？与非流体容器相比，流体是什么？

【参考方案1】：

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

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

【讨论】：

具有两种类型容器的示例具有都改变宽度的项目。

即使知道区别是什么，我还是发现“两者”的示例由于阴影而令人困惑。我对您的代码进行了分叉，以便为某些人提供更清晰的示例：bootply.com/119983（此外，在 Bootstrap 3 中不需要 .row-fluid。无论您的容器是否为流体，都只需使用 .row。）

Carl，您的链接指向与原始链接相同的示例。如果你还有你的分叉版本，你可以发布链接吗？

这是一个很好的 fork 示例 link，以防其他人将来遇到这种情况。

感谢 Mike 另一个例子，他们在我的浏览器上看起来完全一样。

【参考方案2】：

快速版： .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 的最小宽度，所以您的 .container 元素的宽度将为 970px。然后你慢慢地扩大你的浏览器窗口。 .container 的宽度在达到 1200 像素之前不会改变，在该宽度下它会跳到 1170 像素，并且对于任何更大的浏览器宽度都保持不变。

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

【讨论】：

@jkillian 这意味着如果我想构建全宽布局，我应该使用.container-fluid 和.container 来作为盒装宽度，对吗？

@TheHung 完全取决于你所说的“全宽”是什么意思，但据我所知，container-fluid 是我在你的情况下会选择的

@JKillian 现在有很多主题，它们总是有两种布局：盒装和宽布局。希望你能明白我的解释。抱歉英语不好。

@JKillian 那么为什么还需要 container-fluid 呢？

我认为大多数情况下不需要它，只有 .container-fluid 所做的就是在侧面添加填充。大多数情况下，我想要一个带有常规容器的全宽背景，因此外部 div 已经使用全宽。

【参考方案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 的代码答案）。

【讨论】：

.container 的更准确行为不是自适应而不是响应式吗？

@ayjay 你提出了一个很好的观点。使用术语来区分持续调整大小和跳跃调整大小会很有用。

@ayjay Adaptive 检测客户端的设备类型，并在服务器端呈现。响应式不关心客户端是什么设备类型；它只关心宽度（由于媒体查询）。因此，响应式呈现在客户端（css、javascript）。参见huffingtonpost.com/garrett-goodman/… 和amberweinberg.com/is-it-adaptive-or-responsive-web-design IMO 响应式比针对不同设备拥有完全不同版本的站点更容易维护和构建。但是您的 CSS 必须考虑所有浏览器。

@ajay 重新审视自适应与响应的语义问题......因为自适应意味着它正在检测设备，并相应地吐出不同的 html / css / js...... 可以想象 html / css /js 可以包含 width:100%; 的 css 样式。它可以适用于所有设备。在这种情况下，它都是自适应的，但仍然会不断调整大小而不是突然成块地调整大小......因此，将其称为自适应与响应式在语义上是不正确的

我认为“响应式”这个词已经过时了。我们谈论的是响应式页面，因为它会在很短的时间内加载，并且在您与之交互时具有低延迟。我认为这个词不应该用于改变屏幕宽度，但在我解决之前它已经卡住了很久。

【参考方案4】：

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

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

【参考方案5】：

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

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

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

【讨论】：

似乎整体容器流体更好？对手机的响应速度更快，这在当今是一件大事......

【参考方案6】：

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

【讨论】：

这与问题无关。不错的信息，但与此处无关。

Zim 他在问.container-fluid 和.container 之间的区别是什么。那是我正在寻找的信息。您的信息很有趣，但是，当我来寻找答案时，我真的困惑了几分钟。如果它在回答问题的答案之后列出，那将是很好的，但 SO 似乎不允许我们建议我们自己的订单。阅读我原来的评论时，我并没有尽可能清楚。 Anyhoo 感谢您提供的信息。

简而言之，.container根据媒体查询改变宽度，.container-fluid实时改变宽度（根据视口宽度）

【参考方案7】：

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

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

其大小对应的断点为：

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

【参考方案8】：

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

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

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