如何获得比容器宽但不是全宽的引导容器？答案

【问题标题】：How to get a bootstrap container that is wider than container, but not full width?如何获得比容器宽但不是全宽的引导容器？
【发布时间】：2018-07-27 22:57:11
【问题描述】：

我有一个使用 angularjs 和 bootstrap 3 (3.3.7) 的小型 SPA。

页面显示一个标题和一个包含几列的长表。我的主要 div 类是“容器”。当我在 Firefox 中检查内容时，它显示我的表格是 1170p。

在主 div 内部是一个标题、一个复选框和一个包含表格的“行”类 div。

这在一段时间内运行良好，但我现在需要在表格中添加另一列。结果，单元格中的数据有些压缩。我真的需要表格稍微宽一点，但不要占据父容器的整个宽度。

我知道我可以使用 container-fluid 来获得全宽，但我又不想这样。

我怎样才能让它稍微宽一点？

【问题讨论】：

标签： html css angularjs twitter-bootstrap-3

【解决方案1】：

如果需要，您可以通过添加一些 CSS 来创建自定义容器：

.custom-container{
    width: 700px !important;
}

如果您希望它们像原始引导程序那样中断，您需要添加 媒体查询：

@media (min-width: 1200px) {
  .custom-container{
    width: 1000px;
  }
}

@media (min-width: 992px) {
  .custom-container{
    width: 800px;
  }
}

@media (min-width: 768px) {
  .custom-container{
    width: 650px;
  }
}

之后，只需将类添加到您的标记中：

<div class="container custom-container">

【讨论】：

简单的第一个选项适用于我的情况（尽管我必须将其设置为 1400）。如果我想稍后实现“中断”版本，我是否会使用与您在此处列出的相同的最小宽度值，但在宽度属性中使用我的自定义值（例如，第一个值为 1400）？
我列出的值正是我希望宽度中断的地方。它们基本上意味着如果设备宽度大于或等于以像素为单位的值，则执行 {...}。
解释得更深一些，比如第一个查询翻译为：当屏幕宽度大于等于1200px时，自定义容器类的元素为1000px宽。
我其实都知道。我只是想知道这些是否是要检查的标准最小宽度值。
标准最小宽度值在引导文档中（对于引导 3，在你的情况下）：getbootstrap.com/docs/3.3/css，我认为它们与我提到的匹配。