在 twitter bootstrap 中使用什么来获取全屏元素？答案

【问题标题】：What to use to get full screen element in twitter bootstrap?在 twitter bootstrap 中使用什么来获取全屏元素？
【发布时间】：2014-07-17 01:04:27
【问题描述】：

我刚刚开始学习响应式框架Bootstrap，我正在尝试弄清楚如何为整个屏幕制作一个全宽元素。

就像，我正在阅读一篇文章，它指出通常您会使用.container，因为这会使屏幕居中并在边缘添加填充；然后它继续说如果你希望它全屏显示，你应该使用.container-fluid，因为它设置为100%的宽度。

我已经下载了Bootstrap 3.20，这不是真的，它们完全一样：

CSS：

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

那么，如果我想使用全屏方式，我应该为容器使用什么？

【问题讨论】：

你为什么不试试看它有什么作用呢？
@DavidG Ummmmm.......我做到了；根据我的问题和代码，它的作用完全相同。
那你做错了。正如 koala_dev 解释的那样，流体容器不受限制并使用全宽。

标签： css twitter-bootstrap responsive-design twitter-bootstrap-3

【解决方案1】：

区别在于它们用于设置.container大小的媒体查询：

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

.container-fluid 始终为 100%，因此在您的情况下，您希望使用它，或者根据场景，您可以只使用普通的 <div>

【讨论】：

好的，但是container-fluid 的边缘仍然有填充，因此它不会全屏显示。
@Brett 如果你想要一个“真正的”全角元素，只需使用没有任何容器类的 div，.container-fluid 将与具有负边距的 .row 组合以补偿填充