.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(，希望将列居中放置在顶部.行中。我在这样做时遇到了问题。当我将.ajustify内容中心添加到行中时，绝对没有任何效果(列集在容器开始的位置保持左对齐(。我尝试过其他变体，比如.ajustify content-end，看看是否有什么效果。我还尝试使用justify-content: center;创建自己的css类，并使用它来代替Bootstrap类。运气不好。第二排居中。

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>