twitter-bootstrap - Bootstrap .container 和 .container-fluid 类之间有什么区别？

Question

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

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 配对，并且所有列类均以百分比指定。

当摆弄示例时，我看不出任何区别，因为一切看起来都很流畅。

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

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

根据查看网页的视口(viewport)宽度，container 类为其 div 指定特定的固定宽度。对于 container-fluid 来说，这些线不以任何形式存在，因此每次视口(viewport)宽度发生变化时，其宽度都会发生变化。

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

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