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>

Answer 2

默认情况下，bootstrap提供text-center类。请加上这个。需要额外的css或班级。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<section>
  <div class="text-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>

＆＃13;

Answer 3

将2个类mx-auto d-block添加到按钮

<button class="btn btn-primary mx-auto d-block">My Button</button>

当按钮位于卡体div中时，这对我有用。

Answer 4

插入课程center：

<div class="d-inline mx-auto center">

和

 .d-inline.mx-auto.center {
    text-align: center!important;
    display:block!important;
}

＆＃13;

.d-inline.mx-auto.center {
    text-align:center!important;
    display:block!important;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<section>
  <div class="d-inline mx-auto 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>

＆＃13;

Answer 5

尝试它的不同方式，父元素text-align: center 例如：

.center { text-align: center; }

尝试这个CSS

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

Answer 6

这样做的简单方法：只需添加：style="margin-left: 45%;"

<section>
  <div class="d-inline mx-auto" style="margin-left: 45%;">
    <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>

Answer 7

制作一个快速登录页面，并希望按钮居中。对我来说，添加div是一个简单的解决方案:)

学到更多

My page in progress

bootstrap 4对齐按钮在中心

7 个答案: