css - 水平居中元素特定断点及以下

Question

使用 bootstrap 4 我想水平居中一个元素，例如 <select>在 col 内，在给定的断点和断点下方。使用内置的 bootstrap 4 实用程序，而不是自定义 CSS，这可能吗？

例如居中a <select>在 xs 和 sm 断点处，但在 md、lg 和 xl 处返回正常的左对齐。

Bootstrap 具有实用程序 mx-sm-auto但这会将元素置于 sm 断点和上方。这是一个代码笔，显示:https://codepen.io/cpj22/pen/QWLZwJd

(编辑注意:我已经搜索了关于 SO 的热门答案，它们都考虑了水平居中的 inline 元素。如果有重复，请确保它用于 block 元素，bootstrap 4 对每个都有不同的实用程序)

Answer 1

Bootstrap 4 是 built to be mobile-first , 所有基于 min-width 的内置媒体查询.这意味着您无法轻松创建一个仅应用于xs 的选择器和 md断点(因为 Bootstrap 4 中没有 xs 实用程序大小)。

但是，您可以覆盖这些移动优先规则，进一步移动优先规则以更大的断点为目标。申请类(class) ml-md-0除了mx-auto会给左手margin的 0在至少 md 的任何断点上，同时仍保留所需的 auto margin对于 xs和 sm断点。

这可以从以下方面看出:

.bg1 {
  background-color: lightgrey;
}

.bg2 {
  background-color: lightblue;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container mt-5">
  <div class="row">
    <div class="col-6 bg1">
      <div class="row">
        <div class="col-6 mx-auto ml-md-0">
          <select class="form-control mt-5 mb-5">
            <option>select one</option>
            <option>select two</option>
          </select>
        </div>
      </div>
    </div>
    <div class="col-6 bg2">
      <div class="row">
        <div class="col-6 col-sm-6">
          &nbsp;
        </div>
      </div>
    </div>
  </div>
</div>