如何在 Bootstrap 中使列居中
答案:使用mx-auto类
如果您使用的是 Bootstrap 4 版本，则可以通过在其上应用类 .mx-auto 将网格列水平居中。 让我们试试下面的例子，看看它是如何工作的:
示例
<div class="container">
<div class="row">
<div class="col-sm-6 mx-auto">
<!-- Column content -->
</div>
</div>
</div>或者，您也可以在 .row 元素上应用类 .justify-content-center 以使列水平居中。 让我们看看下面的例子:
示例
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-6">
<!-- Column content -->
</div>
</div>
</div>但是，在 Bootstrap 3 中，情况略有不同。 如果网格列数是偶数（例如，2、4、6、8、10、12），您可以使用类 .col-{xs|sm|md|lg}-offset-* 将列居中对齐，如下所示:
示例
<div class="container">
<div class="row">
<div class="col-xs-6 col-xs-offset-3">
<!-- Column content -->
</div>
</div>
</div>但是，如果网格列数是奇数（例如，1、3、5、7、9、11），则必须使用一些自定义 CSS。 让我们看看下面的例子来了解它的基本工作原理:
示例
/* CSS code */
.col-centered{
float: none;
margin: 0 auto;
}
<!-- HTML 代码 -->
<div class="container">
<div class="row">
<div class="col-xs-7 col-centered">
<!-- Column content -->
</div>
</div>
</div>FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
