【问题标题】：Center three col-md-3 columns in Bootstrap 4在 Bootstrap 4 中居中三个 col-md-3 列
【发布时间】：2018-06-28 13:14:21
【问题描述】：

有没有办法让三个 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。有人可以看看并告诉我吗？

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

Flexbox utility classes 是你的朋友。
在这种情况下，您可以在 .row 上使用 justify-content-center。

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

【讨论】：

谢谢您！这就是我要找的东西！

【解决方案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>

【讨论】：

请不要更改全局框架类，例如.row。相反，编写一个额外的类，例如row-centered。
这只是一个演示......我确信 BS4 有自己的课程。

【解决方案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>

【讨论】：