中心 - 在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

列（col-*-*）元素默认为float:left;，您无法对齐浮动元素，因此您必须使用{由display:inline-block;发生的{1}}和remove the extra spaces。

<强> CSS：

display:inline-block;

<强> HTML：

.row1{
    text-align:center;
    margin:0 auto;
}

.row1 .col-md-3{
   display:inline-block;
   vertical-align: middle;
   float: none;
}

Answer 2

通常，好的框架会随着时间的流逝而得到改进。 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>