html - 居中对齐 Bootstrap 中的一行列

Question

我正在使用 Bootstrap 。我有一行包含很多大小为 3 的列。

<div class= "row1" style = margin-left: auto, margin-right: auto">
<div class = col-md-3" > <!--content--> </div>
<div class = col-md-3" > <!--content--> </div>
<div class = col-md-3" > <!--content--> </div>
<div class = col-md-3" > <!--content--> </div>
<div class = col-md-3" > <!--content--> </div>.
.
.
.
</div>

CSS:

.row1{

    text-align:center;
    margin:0 auto;

}

图像显示了呈现的 html 的样子:

我不想要空白空间，并且希望列水平居中。有没有办法做到这一点？我需要大小为 3(我知道它加起来不等于 12，因此陷入困境)。非常感谢所有帮助，在此先感谢您!

Answer 1

通常，伟大的框架会随着时间的推移而得到改进。 Bootstrap 4 有一个新类 Justify-content-center 可以完全满足您的需求。

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-sm-6" style="border: #0b2e13 1px solid;">Hello Friends!</div>
        <div class="col-sm-2" style="border: #0b2e13 1px solid;">Hello Friends!</div>
    </div>
</div>