twitter-bootstrap 如何在html页面中精确地居中引导网格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29128960/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to precisely center bootstrap grid in html page?
提问by wolfgang
When creating an ordinary Grid in bootstrap with 3 rows as the following, the grid is always positioned towards the left of the page,
在 bootstrap 中创建一个普通的 Grid 时，如下 3 行，grid 总是位于页面的左侧，
I've tried centering the entire grid towards the center with the help of text-align:centerand also tried using css classes center-blockand text-center
我试过在 的帮助下将整个网格向中心居中，text-align:center并且还尝试使用 css 类center-block和text-center
But the grid only barely moves towards the center area.
但网格仅勉强向中心区域移动。
Any suggestions on how i can get this to work?
关于如何让它工作的任何建议？
Also i require Precise centeringnot using offsets in bootstrap
此外，我需要精确居中，不使用引导程序中的偏移量
<div class="container">
<div class="row">
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
</div>
<div class="row">
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
</div>
<div class="row">
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
</div>
</div>
回答by Kevin
Here's how to get precise centering without using the offset classes: Fiddle Demo
以下是不使用偏移类获得精确居中的方法：Fiddle Demo
Create a new helper class called col-centered:
创建一个名为 的新助手类col-centered：
.col-centered {
float: none;
margin-right: auto;
margin-left: auto;
}
Any column you use this class on (ex. class="col-md-7 col-centered") will be centered directly in the middle of its container.
您在（例如class="col-md-7 col-centered"）上使用此类的任何列都将直接居中在其容器的中间。
Then, add another set columns around your three column grid:
然后，在三列网格周围添加另一组列：
<div class="container">
<div class="row">
<!-- New set of columns, centered -->
<div class="col-sm-7 col-centered">
<!-- New row -->
<div class="row">
<div class="col-xs-4">
Block
</div>
<div class="col-xs-4">
Block
</div>
<div class="col-xs-4">
Block
</div>
</div>
<div class="row">
<div class="col-xs-4">
Block
</div>
<div class="col-xs-4">
Block
</div>
<div class="col-xs-4">
Block
</div>
</div>
<div class="row">
<div class="col-xs-4">
Block
</div>
<div class="col-xs-4">
Block
</div>
<div class="col-xs-4">
Block
</div>
</div>
</div>
</div>
</div>
Make sure to use col-xs-4rather than col-xs-1to create the three columns so that it spans all twelve of the Bootstrap grid columns.
确保使用col-xs-4而不是col-xs-1创建三列，使其跨越所有十二个 Bootstrap 网格列。
回答by AndrewL64
You need to use offsetto center your columns like this:
您需要使用offset像这样将列居中：
<div class="container">
<div class="row">
<div class="col-xs-1 col-xs-offset-4">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
</div>
<div class="row">
<div class="col-xs-1 col-xs-offset-4">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
</div>
<div class="row">
<div class="col-xs-1 col-xs-offset-4">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
<div class="col-xs-1">
Block
</div>
</div>
</div>
Here's a jsfiddle: https://jsfiddle.net/AndrewL32/e0d8my79/12/
这是一个 jsfiddle：https://jsfiddle.net/AndrewL32/e0d8my79/12/
回答by Jake Wilson
The problem is that you are only using 3 out of 12 possible columns in Bootstrap. The columns, by default, run from left to right. A full 12 columns would look like this:
问题是您在 Bootstrap 中只使用了 12 个可能的列中的 3 个。默认情况下，这些列从左到右排列。完整的 12 列如下所示：
<div class='container'>
<div class='row'>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
</div>
</div>
That HTML represents 12 columns, spanning the entire width of the .container. But since you are using only 3 divs, each 1 column in size, all 3 columns are on the left side of the .container.
该 HTML 表示 12 列，跨越.container. 但由于您仅使用 3 个 div，每列大小为 1 列，因此所有 3 列都位于.container.
If you want 3 columns that span the entire size of the .containerdo this:
如果您想要跨越整个大小的 3 列，.container请执行以下操作：
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
If you want 3, single-column divs that are centered in the .containerit's a bit more complicated since the result of 12-3 = 9 is not divisible by 2. Since it's not divisible by 2 you can't have equal size space on the left and right side of the 3 columns. In order to get around this problem you need to do a nested (sub)grid similar to this:
如果您想要 3 个以 为中心的单列 div，.container它会稍微复杂一些，因为 12-3 = 9 的结果不能被 2 整除。由于它不能被 2 整除，因此您不能在左侧和右侧的 3 列。为了解决这个问题，你需要做一个类似于这样的嵌套（子）网格：
<div class="col-xs-4 col-xs-offset-4">
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
</div>
This is essentially a 3 column within another grid.
这本质上是另一个网格中的 3 列。
That will create 3 divs, but the first will be offset (or pushed) to the right 4 columns, which will make all 3 columns appeared to be centered in the layout
这将创建 3 个 div，但第一个将偏移（或推送）到右侧的 4 列，这将使所有 3 列看起来在布局中居中
回答by wk_
The bootstrap gridhas 12 columns. If you want 3 equal 'columns', they each have to be 12/3 = 4 'gridcolumns' wide.
该引导网格有12列。如果你想要 3 个相等的“列”，它们每个都必须是 12/3 = 4 个“网格列”宽。
You're html will then look like this:
您的 html 将如下所示：
<div class="row">
<div class="col-xs-4">Block</div>
<div class="col-xs-4">Block</div>
<div class="col-xs-4">Block</div>
</div>
回答by Petroff
You need wrapper. Try with <div class="container">Your code here</div>
你需要包装。试试<div class="container">Your code here</div>
EDIT
编辑
The question was edited after that comment.
该问题在该评论后进行了编辑。
