使用Twitter Bootstrap 3将列居中

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

当前回答

对于那些当你没有确切的数字来填充你的网格时，希望在屏幕上将列元素居中的人，我写了一小段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整除。

2015-09-06 21:29:13

其他回答

现在Bootstrap 3.1.1使用.center-block，这个helper类使用列系统。

引导3辅助课程中心。

请检查这个jsfiddle演示:

<div class="container">
    <div class="row">
        <div class="center-block">row center-block</div>
    </div>
    <div class="row">
        <div class="col-md-6 brd">
            <div class="center-block">1 center-block</div>
        </div>
        <div class="col-md-6 brd">
            <div class="center-block">2 center-block</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-2 col-center-block">row col-xs-2 col-center-block</div>
</div>

行列中心使用中心点-中心点-块助手类。

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}

2014-03-18 06:31:52

将下面的代码片段添加到.row或.col中。这是Bootstrap 4*。

d-flex justify-content-center

2018-12-31 06:44:44

别忘了加上!important。然后你可以确定元素真的会在中间:

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

2016-06-24 09:30:28

试试这段代码。

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

这里我使用了col-lg-1，偏移量应该是10，以便在大型设备上正确地居中div。如果您需要它集中在中型到大型设备，那么只需将lg更改为md等等。

2017-08-24 16:43:45

只需将显示内容的列设置为col-xs-12 (mobile-first;-)，并仅配置容器来控制您希望居中内容的宽度，因此:

.container { 背景颜色:蓝色; ｝ .centered { 背景颜色:红色; ｝ <body class="container col-xs-offset-3 col-xs-6"> <div class=" font - family -宋体"> <img data-src="holder.js/100x100" alt="" /> . < / div > 身体< / >

有关演示，请参见http://codepen.io/Kebten/pen/gpRNMe:-)

2015-06-13 13:14:27

使用Twitter Bootstrap 3将列居中

推荐文章

最新文章

标签