问题

如何在 Twitter Bootstrap 3.

请参阅启动器小提琴.

<body class="container">
    <div class="col-lg-1 col-offset-6 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

所以,我想要一个 div ,以为中心的类在容器中居中.我可以使用一个行,如果有多个div,但现在我只想要一个大小为一列的容器(12列)中心的div.

我也不确定上述方法是否足够好,因为目的不是将 div 偏移一半.我不需要在 div 之外的空格,以及 div 的内容比例缩小.我想



解决方法

有两种方法可以使Bootstrap 3中的列&lt; div&gt; 居中:

Approach 1 (offsets):

第一种方法使用Bootstrap自己的偏移类,因此它不需要改变标记,也不需要额外的CSS.关键是设置等于行剩余大小一半的偏移.因此,例如,大小为2的列将通过添加偏移量5来定中心,即(12-2)/ 2 .

在标记中,这将是:

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

现在,这种方法有一个明显的缺点,它只适用于列大小,所以只有 .col-X-2 , .col-支持X-4 , col-X-6 , col-X-8 col-X-10 / p>


Approach 2 (the old margin:auto)

您可以使用经验证的 margin:0 auto; 技术中心任何列大小,您只需要处理Bootstrap网格系统添加的浮动.我建议定义一个自定义CSS类,如下所示:

.col-centered{
    float: none;
    margin: 0 auto;
}

现在,您可以将其添加到任何屏幕大小的任何列大小,它将无缝地与Bootstrap的响应布局:

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

注意:使用这两种方法,您可以跳过 .row 元素,并将列置于 .container 由于容器类中的填充,实际列大小的最小差异.


更新:

由于v3.0.1 Bootstrap有一个名为 center-block 的类,使用 margin:0 auto 但缺少 float:none .你可以将它添加到你的CSS,使其与网格系统一起使用.




相关问题推荐