Html Bootstrap：两列居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21666532/
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
Bootstrap: two column centered
提问by user2820
I'm trying to have a two-column centered layout with Bootstrap 3.1. I've read this: How do I center a Bootstrap div with a 'spanX' class?, but the content is stil aligned to the left. Here is my HTML:
我正在尝试使用 Bootstrap 3.1 进行两列居中布局。我读过这个：如何将 Bootstrap div 与 'spanX' 类居中？，但内容仍然向左对齐。这是我的 HTML：
<div class="row">
<div class="center">
<div class="col-lg-3 gauche">
Left div
</div>
<div class="col-lg-5 corps">
Right div
</div>
</div>
</div>
And my CSS:
还有我的 CSS：
body
{
padding: 0;
margin: 0;
}
.corps
{
background-color: white;
}
.contenu
{
margin-top: 5em;
margin-bottom: 1em;
background-color: white;
padding: 1.2em;
padding-left: 1.5em;
}
.center
{
float: none;
margin-left: auto;
margin-right: auto;
}
.gauche
{
background-color: #e6e6e6;
min-height: 200px;
}
Result is here: http://i.imgur.com/5nhZ2WS.png
结果在这里：http: //i.imgur.com/5nhZ2WS.png
回答by moodyjive
Add a container, remove the center div and add two blank col-lg-2 on either side so it adds up to 12 columns:
添加一个容器，移除中心 div 并在两侧添加两个空白 col-lg-2 使其加起来为 12 列：
<div class="container">
<div class="row">
<div class="col-lg-2">
</div>
<div class="col-lg-3 gauche">
Left div
</div>
<div class="col-lg-5 corps">
Right div
</div>
<div class="col-lg-2">
</div>
</div>
</div>
回答by theRyanMark
You would want to use a column offset class. If you are using a stock build of Bootstrap all of the column classes need to add up to 12. Your col-lg-3and col-lg-5only add up to 8 so adding a col-lg-offset-2should fix you up to center. Also, bootstrap has a built in centering class containeri personally would use that. See below code:
您可能想要使用列偏移类。如果您使用的是 Bootstrap 的库存版本，则所有列类都需要加起来为 12。您col-lg-3并且col-lg-5只加起来为 8，因此添加一个col-lg-offset-2应该可以使您达到中心。此外，bootstrap 有一个内置的居中类，container我个人会使用它。见下面的代码：
<div class="container">
<div class="row">
<div class="col-lg-3 col-lg-offset-2 gauche">
Left div
</div>
<div class="col-lg-5 corps">
Right div
</div>
</div>
</div>
回答by Tafadzwa Gonera
For a scalable solution I recommend:
对于可扩展的解决方案，我建议：
HTML:
HTML：
<div class="row">
<div class="center">
<div class="col-lg-3 gauche">Left div</div>
<div class="col-lg-5 corps">Right div</div>
</div>
</div>
SCSS:
社会保障：
.center {
display: flex;
flex-direction: row;
justify-content: center;
.col-* {
display: inline-block;
margin-left: -2px; /* Adjust the value of marging work best with your context */
float: none;
}
}
Now it won't matter how many columns (or types of columns) you put in <div class="center"></div>
现在，您放入多少列（或列的类型）都无关紧要 <div class="center"></div>
回答by Kody
Try
尝试
.row {
margin:0px auto;
}
