Question

使用引导程序4，我想将<select>之类的元素（例如col）在给定的断点和该断点以下的水平居中。使用内置的bootstrap 4实用程序，而不是自定义CSS，这可能吗？

例如，将<select>置于xs和sm断点的中心，但返回到在md，lg和xl处正常的左对齐。

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

（编者注：我已经搜索了SO上比较流行的答案，并且所有这些答案都将 inline 元素水平居中。如果有重复，请确保重复对于块元素，引导程序4的每个都有不同的实用程序）

Answer 1

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

但是，您可以覆盖这些移动优先规则，并使用更多移动优先规则来定位更大的断点。除ml-md-0外，还应用类mx-auto将在最低 {{1 }}，同时仍保留 margin和0断点所需的md auto。

这可以在下面看到：

margin

xs

Answer 2

如果您使用自动页边距（mx-auto），则实际上是将整个列居中放置在行中，而不是将列中的选择居中。正如@ObsidianAge所说，您可以通过将页边距设置为0来重置列居中。

     <div class="col-6 bg1">
            <div class="row">
                <div class="col-6 mx-md-0 mx-auto">
                    <select class="form-control mt-5 mb-5">
                        <option>select one</option>
                        <option>select two</option>
                    </select>
                </div>
            </div>
     </div>

但是，我不了解在外部col-6内嵌套内部col-6的目的。如果内部col-6的唯一目的是限制form-control的宽度，则更容易使用w-50作为输入，以及响应文本对齐实用程序（text-center text-md-left）。这样，您可以将选择集中在列内部，而不是列本身。.

   <div class="col-6 bg1 text-center text-md-left">
        <select class="w-50 form-control d-inline mt-5 mb-5">
            <option>select one</option>
            <option>select two</option>
        </select>
   </div>

演示：https://www.codeply.com/go/faoFpkh8Ij

Answer 3

您想要这张照片吗？使用此代码

.bg{
  background: linear-gradient(to left, lightgrey 50%, lightblue 50%);
  background: -webkit-linear-gradient(to left, lightgrey 50%, lightblue 50%);
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Hello, world!</title>
  </head>
  <body>
    <div class="container mt-5">
    <div class="row">
      <div class="col-12 bg">
        <div class="row">
          <div class="col-6 mx-sm-auto">
            <select class="form-control mt-5 mb-5">
              <option>select one</option>
              <option>select two</option>
            </select>
          </div>
        </div>
      </div>
    </div>

   
  </body>
</html>

将元素水平居中放置特定断点并在其下

3 个答案: