在引导程序上居中 .col-md-x

Posted 2023-03-29

技术标签:

【中文标题】在引导程序上居中 .col-md-x【英文标题】：Centering .col-md-x on bootstrap 【发布时间】：2013-11-23 20:54:38 【问题描述】：

如何将 .col-md-8 (http://getbootstrap.com/css/#grid-example-basic) 置于引导有效 html 的中心？

【问题讨论】：

【参考方案1】：

您可以使用类 col-md-offset-2。或者你可以在你的列 div 中创建一个 div 并使用一个内容中心类。希望这会有所帮助。

【讨论】：

【参考方案2】：

您可以使用 Bootstrap 类.mx-auto。

<div class="row">
    <div class="col-md-8 mx-auto">
        <p>Content with 8 columns in md</p>
    </div>
</div>

【讨论】：

【参考方案3】：

我所做的有点笨拙，但它确实有效：

只需在主 col-md-8 div 前后使用 col-md-2 divs。

【讨论】：

【参考方案4】：

只需将 .row-centered 类添加到行，将 .col-centered 类添加到列。

<div class="container">
  <div class="row row-centered">
    <div class="col-md-8 col-centered"></div>
  </div>
</div>

CSS

.row-centered text-align:center;
.col-centered  display:inline-block; float:none; margin-right:-4px;

【讨论】：

以上是关于在引导程序上居中 .col-md-x的主要内容，如果未能解决你的问题，请参考以下文章