小时引导容器全宽答案

【问题标题】：bootstrap container full width when small小时引导容器全宽
【发布时间】：2020-06-08 15:42:21
【问题描述】：

我有一个引导容器，在中型和大型上看起来很棒。当小的时候，我希望容器是全宽的。我在上面放了 mx-2 mx-md-auto 类，这使它在小屏幕上很好地左对齐，但不是全宽，因为容器通常是固定宽度（510px）。我不想修改引导容器断点，因为我宁愿将响应类用于容器的这种特定用途。有什么我可以在这里做的吗？

【问题讨论】：

标签： twitter-bootstrap bootstrap-4

【解决方案1】：

在小屏幕 (xs) 上，Bootstrap 将 width: auto 设置为 .container，因此默认情况下应该是全屏。

此外，Bootstrap 是移动优先的框架，因此您应该始终从最小的屏幕开始，然后在更大的屏幕上覆盖。所以通常你从 .col-X 开始，然后在需要时用 .col-[screen]-Y 覆盖它。

例如看看下面的 sn-p 并尝试调整它的大小：

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-3 col-lg-2">
      Test 1
    </div>
    <div class="col-12 col-sm-6 col-md-3 col-lg-2">
      Test 2
    </div>
  </div>  
</div>

【讨论】：

【解决方案2】：

当达到所需宽度时，使用自定义 CSS 覆盖容器的 `max-width`。

限制其宽度的容器的max-width css 属性。由于 bootstrap 没有 max-width 的实用程序类，因此您需要自己覆盖它。

@media (max-width: 767.98px) {
  .mx-w-100 {
    max-width: 100% !important;
  }
}

【讨论】：

【解决方案3】：

Bootstrap 会将 xs 屏幕上的容器设置为全宽。如果您想让容器在其他尺寸上占据全宽，请尝试

@media (max-width: 767.98px) {
  /*By default, containers are only full-width on xs screens. 
  This makes them full-width om sm screens as well*/
  .container {
    margin-left: 0;
    margin-right: 0;
    max-width: 100% !important;
  }
}

768px 是 sm 和 md 之间的断点。如果您希望在任何其他屏幕尺寸上发生这种情况，您可以将媒体查询增加到 md 和 lg 或 lg 和 xl 之间（但是，此时，您可能只想使用 container-fluid）

【讨论】：

当达到所需宽度时，使用自定义 CSS 覆盖容器的 max-width。

当达到所需宽度时，使用自定义 CSS 覆盖容器的 `max-width`。