在Bootstrap 4中居中三个col-md-3列

Question

有没有办法有三个col-md-3列并将它们居中.偏移不起作用,因为我必须偏移一列半的第一列.那还有另一种方法吗？

这是代码的大纲:

.col-md-3 {
  background-color: #e2e2e2;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-md-3">First column</div>
    <div class="col-md-3">Second column</div>
    <div class="col-md-3">Third column</div>
  </div>
</div>

我在SO上找到的答案都与Bootstrap 3及更低版本有关.并没有使用Bootstrap 4.有人可以看一看让我知道吗？

Answer 1

该Flexbox的实用程序类是你的朋友.在这种情况下
你可以使用justify-content-centeron .row.

.row {
    background-color: lavender;
}

.col-md-3 {
    background-color: gray;
}

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-3">First column</div>
        <div class="col-md-3">Second column</div>
        <div class="col-md-3">Third column</div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>