Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
398 views
in Technique[技术] by (71.8m points)

css - 使用Twitter Bootstrap 3将列居中(Center a column using Twitter Bootstrap 3)

How do I center a div of one column size within the container (12 columns) in Twitter Bootstrap 3 ?

(如何在Twitter Bootstrap 3的容器(12列)中将一列大小的div居中?)

 .centered { background-color: red; } 
 <body class="container"> <div class="col-lg-1 col-offset-6 centered"> <img data-src="holder.js/100x100" alt="" /> </div> </body> 

I want a div , with a class .centered to be centered within the container.

(我想要一个div ,其中一个.centered类位于容器内的中心位置。)

I may use a row if there are multiple div s, but for now I just want a div with the size of one column centered within the container (12 columns).

(如果有多个div ,我可以使用一行,但是现在我只想要一个div ,其大小以一列为中心位于容器内(12列)。)

I am also not sure the above approach is good enough as the intention is not to offset the div by half.

(我也不确定上述方法是否足够好,因为其目的不是将div偏移一半。)

I do not need free spaces outside the div and the contents of the div shrink in proportion.

(我不需要自由空间外div和内容div按比例缩小。)

I want to empty space outside the div to be evenly distributed (shrink till the container width is equal to one column).

(我想在div外部留出空间以使其均匀分布 (缩小直到容器宽度等于一列)。)

  ask by bsr translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

There are two approaches to centering a column <div> in Bootstrap 3:

(有两种方法可以使Bootstrap 3中的列<div>居中:)

Approach 1 (offsets): (方法1(偏移):)

The first approach uses Bootstrap's own offset classes so it requires no change in markup and no extra CSS.

(第一种方法使用Bootstrap自己的偏移量类,因此不需要更改标记,也不需要额外的CSS。)

The key is to set an offset equal to half of the remaining size of the row .

(关键是将偏移量设置为等于行剩余大小的一半 。)

So for example, a column of size 2 would be centered by adding an offset of 5, that's (12-2)/2 .

(因此,例如,大小为2的列将通过添加偏移量5(即(12-2)/2居中。)

In markup this would look like:

(在标记中,它看起来像:)

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

Now, there's an obvious drawback for this method.

(现在,此方法有一个明显的缺点。)

It only works for even column sizes , so only .col-X-2 , .col-X-4 , col-X-6 , col-X-8 , and col-X-10 are supported.

(它仅适用于偶数列大小 ,因此仅支持.col-X-2.col-X-4col-X-6col-X-8col-X-10 。)


Approach 2 (the old margin:auto ) (方法2(旧margin:auto)

You can center any column size by using the proven margin: 0 auto;

(您可以使用已证明的margin: 0 auto;任何列大小居中 margin: 0 auto;)

technique.

(技术。)

You just need to take care of the floating that is added by Bootstrap's grid system.

(您只需要注意由Bootstrap的网格系统添加的浮动即可。)

I recommend defining a custom CSS class like the following:

(我建议定义一个自定义CSS类,如下所示:)

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

Now you can add it to any column size at any screen size, and it will work seamlessly with Bootstrap's responsive layout:

(现在,您可以将其添加到任何屏幕尺寸的任何列尺寸,并且它将与Bootstrap的响应式布局无缝协作:)

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

Note: With both techniques you could skip the .row element and have the column centered inside a .container , but you would notice a minimal difference in the actual column size because of the padding in the container class.

(注意:两种方法都可以跳过.row元素,并使列居中位于.container内部,但是由于容器类中的填充,您会注意到实际列大小的最小差异。)


Update:

(更新:)

Since v3.0.1 Bootstrap has a built-in class named center-block that uses margin: 0 auto , but is missing float:none , you can add that to your CSS to make it work with the grid system.

(由于v3.0.1 Bootstrap具有一个名为center-block的内置类,该类使用margin: 0 auto ,但缺少float:none ,因此可以将其添加到CSS中以使其与网格系统一起使用。)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...