twitter-bootstrap - 小时引导容器全宽

Question

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

标签： twitter-bootstrapbootstrap-4

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>