使用Twitter Bootstrap 3中心列 [英] Center a column using Twitter Bootstrap 3
问题描述
如何在 Twitter Bootstrap 中的容器（12列）中居中一个栏大小的div / a> 3。
请参阅启动器小提琴。
< body class =container>
< div class =col-lg-1 col-offset-6 centered>
< img data-src =holder.js / 100x100alt =/>
< / div>
< / body>
所以，我想要一个 div 一个中心类在容器中居中。我可以使用一行，如果有多个div，但现在我只想要一个大小为一列的容器（12列）中心的div。
也不确定上述方法是否足够好，因为目的不是将 div 抵消一半。我不需要在 div 之外的自由空间，而且 div 的内容会按比例缩小。我想
在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
您可以使用经验证的 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 中，但是您会注意到实际列大小的最小差异，
$ b b
由于v3.0.1 Bootstrap有一个内置的类 center-block ，使用 margin：0 auto 但缺少 float：none 。您可以将其添加到您的CSS，使其与网格系统一起使用。
How do I center a div of one column size within the container (12 columns) in Twitter Bootstrap 3.
Please see the starter fiddle.
<body class="container">
<div class="col-lg-1 col-offset-6 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
</body>
So, I want a div, with a class centered to be centered within the container. I may use a row if there are multiple divs, but for now I just want a div with size of one column centered within the container (12 columns).
I am also not sure the above approach is good enough as the intention is not to offset the div by half. I do not need free spaces outside the div and the contents of the div shrink in proportion. I want to empty space outside the div to be evenly distributed (shrink till the container width == one column).
There are two approaches to centering a column <div> in Bootstrap 3:
Approach 1 (offsets):
The first approach uses Bootstrap's own offset classes so it requires no change in markup and no extra 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.
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.
Approach 2 (the old margin:auto)
You can center any column size by using the proven margin: 0 auto; technique, you just need to take care of the floating that is added by Bootstrap's grid system. I recommend defining a custom CSS class like the following:
.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:
<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.
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.
这篇关于使用Twitter Bootstrap 3中心列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
登录 关闭
