我如何在Twitter Bootstrap 3的容器(12列)中心一个列大小的div ?

.centered { 背景颜色:红色; } <!——最新编译和最小化的CSS——> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="匿名"> <身体类= "容器" > <div class=" font - family -宋体"> <img data-src="holder.js/100x100" alt="" /> . < / div > 身体< / >

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

我也不确定上面的方法是否足够好,因为目的不是将div抵消一半。我不需要在div之外的自由空间和div的内容按比例缩小。我想清空div之外的空间,以均匀分布(收缩直到容器宽度等于一列)。


当前回答

正如koala_dev在他的方法1中使用的那样,我更喜欢offset方法,而不是使用有限的center-block或margin方法,但正如他提到的:

现在,这种方法有一个明显的缺点,它只适用于相同大小的列,因此只支持.col- x -2, .col- x -4, col-X-6, col-X-8和col-X-10。

对于奇数列,可以使用以下方法求解。

<div class="col-xs-offset-5 col-xs-2">
    <div class="col-xs-offset-3">
        // Your content here
    </div>
</div>

其他回答

要在Bootstrap行中居中多个列-并且cols的数量是奇数,只需将这个css类添加到该行中的所有列:

.many-cols-centered {  // To horizontally center bootstrap odd cols, eg col-lg-9, col-md-3, works well in lg
  display:inline-block;
  float:none;
}

所以在你的HTML中,你有这样的东西:

<div class="row text-center"> <!-- text-center centers all text in that row -->
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image1.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image2.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image3.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
</div>

Bootstrap 3现在有一个内置的类。center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

如果你还在用2。X然后把它添加到你的CSS。

在Bootstrap 3中有两种方法来居中列<div>:

方法1(偏移量):

第一种方法使用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。


方法2(旧边距:auto)

您可以通过使用已验证的边距来居中任何列大小: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中,使其与网格系统一起工作。

正如koala_dev在他的方法1中使用的那样,我更喜欢offset方法,而不是使用有限的center-block或margin方法,但正如他提到的:

现在,这种方法有一个明显的缺点,它只适用于相同大小的列,因此只支持.col- x -2, .col- x -4, col-X-6, col-X-8和col-X-10。

对于奇数列,可以使用以下方法求解。

<div class="col-xs-offset-5 col-xs-2">
    <div class="col-xs-offset-3">
        // Your content here
    </div>
</div>
<div class="container">
    <div class="row row-centered">
        <div class="col-xs-6 col-centered">Column 6</div>
        <div class="col-xs-6 col-centered">Column 6</div>
        <div class="col-xs-3 col-centered">Column 3</div>
        <div class="col-xs-3 col-centered">Column 3</div>
        <div class="col-xs-3 col-centered">Column 3</div>
    </div>
</div>

CSS

/* centered columns styles */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
    text-align: center;
    background-color: #ccc;
    border: 1px solid #ddd;
}