引导容器较小时的全宽

Question

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

Answer 1

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

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

例如，查看以下代码片段并尝试调整其大小：

.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>