如何在 Twitter Bootstrap 3?
.center {背景颜色:红色；}<!-- 最新编译和缩小的 CSS --><link rel="stylesheet" href="maxcdn.bootstrapcdn/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/bootstrap.min.css"><body class="容器"><div class="col-lg-1 col-offset-6 居中"><img data-src="holder.js/100x100" alt=""/>我想要一个 div，带有一个 .centric 类在容器内居中.如果有多个 div，我可能会使用一行，但现在我只想要一个 div，其大小为一列在容器内居中(12 列).
我也不确定上述方法是否足够好，因为目的不是将 div 偏移一半.我不需要 div 之外的空闲空间，并且 div 的内容按比例缩小.我想将div外的空白空间均匀分布(缩小到容器宽度等于一列).
解决方案在 Bootstrap 3 中有两种方法可以使列居中
:方法 1(偏移量):第一种方法使用 Bootstrap 自己的偏移类，因此它不需要更改标记，也不需要额外的 CSS.关键是设置一个偏移量等于行剩余大小的一半.例如，大小为 2 的列将通过添加 5 的偏移量来居中，即 (12-2)/2.
在标记中，这看起来像:
<div class="col-md-2 col-md-offset-5"></div>现在，这种方法有一个明显的缺点.它只适用于偶数列大小，所以只适用于 .col-X-2、.col-X-4、col-支持 X-6、col-X-8 和 col-X-10.
方法 2(旧的 margin:auto)您可以使用经过验证的 margin: 0 auto; 技术将任何列大小居中.您只需要处理 Bootstrap 的网格系统添加的浮动即可.我建议定义一个自定义 CSS 类，如下所示:
.col 为中心{浮动:无；边距:0 自动；}现在您可以将其添加到任何屏幕大小的任何列大小，并且它将与 Bootstrap 的响应式布局无缝协作:
<div class="col-lg-1 col-centric"></div>注意: 使用这两种技术，您可以跳过 .row 元素并将列置于 .container 内居中，但您会注意到由于容器类中的填充，实际列大小的差异很小.
更新:
自 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?
.centered { background-color: red; }<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="maxcdn.bootstrapcdn/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <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. I may use a row if there are multiple divs, but for now I just want a div with the 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 is equal to 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 将列居中
发布评论