Question

我正在尝试使用Bootstrap 3.1进行两列居中布局。我读过这个：How do I center a Bootstrap div with a 'spanX' class?，但内容与左边对齐。这是我的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

您可能希望使用列偏移类。如果您使用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>

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>

Answer 3

对于可扩展的解决方案，我建议：

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

现在，您放入<div class="center"></div>中的列数（或列类型）无关紧要

Answer 4

尝试

.row {
  margin:0px auto;
}

Bootstrap：两列居中

4 个答案: