twitter-bootstrap 使用 twitter bootstrap 3 将 9 列布局居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27224650/
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
Center a 9-column layout using twitter bootstrap 3
提问by shubendrak
My code is like
我的代码就像
<div class="container-fluid">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
</div>
I want to center those 9columns and 4columns. what is the right way to do it with bootstrap. For second case i tried
我想将那些 9columns 和 4columns 居中。使用引导程序执行此操作的正确方法是什么。对于第二种情况，我试过
<div class="row">
<div class="col-md-2 col-md-offset-4"></div>
<div class="col-md-2"></div>
</div>
It works. What should i use to center the 9column of first row.
有用。我应该用什么来使第一行的 9column 居中。
回答by Zim
You can use nesting and col-*-offset-*to center odd numbers of columns (where you have 3 in a row). The case of the row with 2 columns can be simply centered using offsets (no nesting required). Use text-centerto center the content inside the columns.
您可以使用嵌套并将col-*-offset-*奇数列居中（连续 3 列）。具有 2 列的行的情况可以使用偏移（无需嵌套）简单地居中。用于text-center将列内的内容居中。
<div class="container-fluid">
<div class="row">
<div class="col-md-11 col-md-offset-1">
<div class="row">
<div class="col-md-3 col-md-offset-1 text-center"></div>
<div class="col-md-3 text-center"></div>
<div class="col-md-3 text-center"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-4 text-center"></div>
<div class="col-md-2 text-center"></div>
</div>
</div>
回答by Justin Kahn
To really center a 9-column layout you must use custom CSS with margins.
要真正使 9 列布局居中，您必须使用带边距的自定义 CSS。
ZimSystem's solution is close but not exact, its off by 1/288th of the screen width. That is the if the 9 columns represent 9/12th of the screen width, the columns are 23/144 from the left but 22/144 from the right. Furthermore, rather than the 3 content columns being 3/12 they are really 11/48.
ZimSystem 的解决方案很接近但不准确，它关闭了屏幕宽度的 1/288。也就是说，如果 9 列代表屏幕宽度的 9/12，则这些列距左侧 23/144，但距右侧 22/144。此外，不是 3 个内容列是 3/12，它们实际上是 11/48。
The correct way is to nest a row within a row, adding 12.5% margins to the sides of the inner row
正确的做法是在一行内嵌套一行，在内行的边上增加12.5%的边距
<div class="text-center center-header">x</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row center-row-9">
<div class="col-md-4 text-center">x</div>
<div class="col-md-4 text-center">x</div>
<div class="col-md-4 text-center">x</div>
</div>
</div>
</div>
</div>
The center-row-9 css would simply be margin: 0 12.5%I compare ZimSystem's solution with a margin based solution here http://codepen.io/jdkahn/pen/mEoaoY
center-row-9 css 只是margin: 0 12.5%我在这里将 ZimSystem 的解决方案与基于边距的解决方案进行比较http://codepen.io/jdkahn/pen/mEoaoY
回答by Tiago Chilanti
This works for me. I even added a left and right margin, but you can remove it if you want.
这对我有用。我什至添加了左右边距，但您可以根据需要将其删除。
.padding-left-10 {
padding-left: 15px;
padding-right: 0px;
}
.padding-right-10 {
padding-left: 0px;
padding-right: 15px;
}
.padding-0 {
padding: 0;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-4 text-center padding-0">
<div class="col-md-4 text-center padding-left-10 "><div class="well">x</div></div>
<div class="col-md-4 text-center padding-0"><div class="well">x</div></div>
<div class="col-md-4 text-center padding-0"><div class="well">x</div></div>
</div>
<div class="col-md-4 text-center padding-0">
<div class="col-md-4 text-center padding-0"><div class="well">x</div></div>
<div class="col-md-4 text-center padding-0"><div class="well">x</div></div>
<div class="col-md-4 text-center padding-0"><div class="well">x</div></div>
</div>
<div class="col-md-4 text-center padding-0">
<div class="col-md-4 text-center padding-0"><div class="well">x</div></div>
<div class="col-md-4 text-center padding-0"><div class="well">x</div></div>
<div class="col-md-4 text-center padding-right-10"><div class="well">x</div></div>
</div>
</div>
</div>
</div>
</div>
