Bootstrap .container 和 .container-fluid 类有什么区别? [英] What is the difference between Bootstrap .container and .container-fluid classes?

问题描述

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

Just downloaded 3.1 and found in the docs...

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

Turn any fixed-width grid layout into a full-width layout by changing your outermost .container to .container-fluid.

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

Looking in bootstrap.css, it appears that .container-fluid is identical to .container. Both have the same CSS, and every instance of .container-fluid is paired with .container, and all column classes are specified in percentages.

在摆弄示例时，我看不出有什么不同，因为一切似乎都很流畅.

When twiddling with examples I could not see any difference, as everything seemed fluid.

由于我是 Bootstrap 的新手，所以我认为我遗漏了一些东西.有人可以花一点时间来启发我吗?

As I'm new to Bootstrap, I assume I'm missing something. Could someone take a minute and enlighten me?

推荐答案

快速版本: .container 在 bootstrap (xs,sm,md,lg);.container-fluid 扩展以填充可用宽度.

Quick version: .container has one fixed width for each screen size in bootstrap (xs,sm,md,lg); .container-fluid expands to fill the available width.

container 和 container-fluid 之间的区别来自 CSS 的这些行:

The difference between container and container-fluid comes from these lines of 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来说，这些线不以任何形式存在，所以每次视口宽度改变时，它的宽度都会改变.

Depending on the width of the viewport that the webpage is being viewed on, the container class gives its div a specific fixed width. These lines don't exist in any form for container-fluid, so its width changes every time the viewport width changes.

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

So for example, say your browser window is 1000px wide. As it's greater than the min-width of 992px, your .container element will have a width of 970px. You then slowly widen your browser window. The width of your .container won't change until you get to 1200px, at which it will jump to 1170px wide and stay that way for any larger browser widths.

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

Your .container-fluid element, on the other hand, will constantly resize as you make even the smallest changes to your browser width.

这篇关于Bootstrap .container 和 .container-fluid 类有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！