Bootstrap:两列居中

Question

我正在尝试使用Bootstrap 3.1进行两列居中布局.我读过这个:我如何将一个带有'spanX'类的Bootstrap div居中？,但内容与左侧对齐.这是我的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>

我的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;
}

结果如下:http://i.imgur.com/5nhZ2WS.png

Answer 1

您可能希望使用列偏移类.如果您使用的是库存增加的引导所有列类需要添加多达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>

Answer 2

添加一个容器,删除中心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>