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

Question

有没有办法有三列三柱，并使之居中。偏移量不起作用，因为我必须对一列半的第一列进行偏移。还有别的办法吗？

下面是代码的大纲：

​

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

​

我设法在上面找到的答案都与Bootstrap 3和更低的版本有关。但是没有和Bootstra4一起工作。谁能帮我看看然后告诉我吗？

Answer 1

Flexbox实用程序类是你的朋友。

在这种情况下，您可以在.row上使用.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"/>

​

Answer 2

是

将justify-content:center应用于行。

如所示，BS4为这个.justify-content-center有自己的类

​

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

.row {
  justify-content:center;
}
/* or apply the class "justify-content-center" to the row */

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

​

Answer 3

flex怎么样？

<div class="container">
        <div class="d-flex 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>