在 Bootstrap 中居中对齐一行列

Question

我正在使用引导程序。我有一排有很多大小为 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>

Answer 2

默认情况下， Column ( col-*-*) 元素具有float:left;并且您无法对齐浮动元素，因此您必须使用display:inline-block;并删除产生的额外空格display:inline-block;。

CSS：

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

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

HTML：

<div class="row1">
      <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>