我如何在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之外的空间,以均匀分布(收缩直到容器宽度等于一列)。


当前回答

更准确地说,Bootstrap的网格系统包含12列,为了将任何内容居中,例如,内容占用一列。需要占用Bootstrap网格的两列,并将内容放置在这两列的一半上。

<div class="row">
   <div class="col-xs-2 col-xs-offset-5 centered">
      ... your content / data will come here ...
   </div>
</div>

'col-xs-offset-5'告诉网格系统从哪里开始放置内容。

'col-xs-2'告诉网格系统内容应该占据多少剩余列。

' centric '将是一个定义的类,它将内容居中。

下面是这个例子在Bootstrap的网格系统中的样子。

列:

1 | 2 | 3 | 4 5 6 7 | | | | | 8 9 10 11 | | | 12

.......offset....... .data. .......不习惯……

其他回答

正如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>

我建议简单地使用类text-center:

<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

对于那些当你没有确切的数字来填充你的网格时,希望在屏幕上将列元素居中的人,我写了一小段JavaScript来返回类名:

function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) {
    var arrayFill = function (size, content) {
        return Array.apply(null, Array(size)).map(String.prototype.valueOf, content);
    };

    var elementSize = parseInt(12 / elementsPerRow, 10);
    var normalClassName = 'col-' + screenSize + '-' + elementSize;
    var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow;
    var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements;
    var ret = arrayFill(numberOfFittingElements, normalClassName);
    var remainingSize = 12 - numberOfRemainingElements * elementSize;
    var remainingLeftSize = parseInt(remainingSize / 2, 10);
    return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize));
}

如果你有5个元素,你想在md屏幕上每行有3个元素,你可以这样做:

colCalculator(5, 3, 'md')
>> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"]

记住,第二个参数必须能被12整除。

注意,如果你正在使用Bootstrap 4,你可以在你的行中使用.align-items-center,因为Bootstrap 4现在使用flex系统。

我们可以通过使用表布局机制来实现这一点:

其机理为:

将所有列包装在一个div中。 将该div作为一个具有固定布局的表格。 将每一列作为一个表格单元格。 使用垂直对齐属性来控制内容位置。

示例演示在这里