自举容器小时全宽

Question

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

Answer 1

On small screen (xs) Bootstrap sets width: auto to .container so it should be full screen by default.

Also Bootstrap is mobile-first framework so you should always start from the smallest screen and then override on larger screens. So normally you start with .col-X and then override it with .col-[screen]-Y if needed.

For example take a look at the following snippet and try to resize it:

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

Answer 2

达到所需宽度时，使用自定义CSS覆盖容器的persistence.xml。

max-width阻止max-width占用设备的整个宽度。由于引导程序没有container的实用程序类，因此您需要自己覆盖它。

max-width

---

Answer 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）