css - bootstrap 4 在中心对齐按钮

Question

我对如何居中对齐我的按钮组有点困惑:

<section>
  <div class="d-inline mx-auto">
    <a class="btn btn-outline-primary" href="#">Home</a>
    <a class="btn btn-outline-primary" href="#">Traffic</a>
    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
    <a class="btn btn-outline-primary" href="#">Alert Logging</a>
    <a class="btn btn-outline-primary" href="#">Diameter Server</a>
    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
  </div>
</section>

我试过向它添加 d-inline 和 mx-auto 但它不起作用。我对图书馆不太熟悉，所以有人可以为我指明正确的方向吗？

Answer 1

只需使用 margin:auto 它与 bootstrap 4 一起工作

.center{margin:auto;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="row">
  <div class="center">
    <a class="btn btn-outline-primary" href="#">Home</a>
    <a class="btn btn-outline-primary" href="#">Traffic</a>
    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
    <a class="btn btn-outline-primary" href="#">Alert Logging</a>
    <a class="btn btn-outline-primary" href="#">Diameter Server</a>
    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
  </div>
</section>

或者你可以用这种方式使用 mx-auto..

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="row">
  <div class="mx-auto">
    <a class="btn btn-outline-primary" href="#">Home</a>
    <a class="btn btn-outline-primary" href="#">Traffic</a>
    <a class="btn btn-outline-primary" href="#">MAC Monitoring</a>
    <a class="btn btn-outline-primary" href="#">Alert Logging</a>
    <a class="btn btn-outline-primary" href="#">Diameter Server</a>
    <a class="btn btn-outline-primary" href="#">Maintenance Mode</a>
  </div>
</section>