.justify-content-center 类在应用于 .row 时不起作用（Bootstrap 4.4.1）

Question

我有以下代码：

<div class="container pt-5">
    <div class="row">
        <div class="col-6 col-sm-3">
          <ul>
              <li>Example List Item</li>
              <li>Example List Item</li>
              <li>Example List Item</li>
          </ul>
        </div>
        <div class="col-6 col-sm-3">
            <ul>
              <li>Example List Item</li>
              <li>Example List Item</li>
              <li>Example List Item</li>
            </ul>
        </div>
        <div class="col-6 col-sm-3">
            <ul>
              <li>Example List Item</li>
              <li>Example List Item</li>
              <li>Example List Item</li>
            </ul>
        </div>
        <div class="col-6 col-sm-3">
            <ul>
              <li>Example List Item</li>
              <li>Example List Item</li>
              <li>Example List Item</li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 text-center">
            <p class="copyright pt-5 text-muted">Blah blah blah.</p>
        </div>
    </div>
</div>

我正在使用最新的 Boostrap 4 (4.4.1) 并希望将列在顶部 .row 中居中。我这样做有困难。当我将 .justify-content-center 添加到该行时，绝对没有任何效果（列集在我的容器开始处保持向左刷新）。我尝试了其他变体，例如 .justify-content-end 以查看是否有任何效果。我还尝试使用 justify-content: center; 创建自己的 css 类，并使用它代替 Bootstrap 类。没有运气。第二个 .row 居中很好。

Answer 1

试试看：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-2">
      3 of 3
    </div>
  </div>
</div>