Html 引导：两列居中

我正在尝试使用Bootstrap3.1实现一个以两列为中心的布局。 我读过：，但内容仍然向左对齐。这是我的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>

结果如下：

试试看

.row {
  margin:0px auto;
}

---

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

左div
右分区

您可能希望使用列偏移量类。如果您使用的是Bootstrap的库存构建，那么所有列类的总和都需要达到12。您的

col-lg-3

和

col-lg-5

加起来最多只有8个，因此添加

col-lg-offset-2

应该可以将您调整到中心位置。另外，bootstrap有一个内置的中心类

容器

，我个人会使用它。见以下代码：

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

左div
右分区

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

HTML:

---

现在，无论你在

中放了多少列（或列的类型），它似乎都不会改变任何东西。欢迎光临。如果有帮助，请批准答案。应该使用col-lg-offset-2代替。你应该使用offset代替。非常感谢。在看了几个小时的许多解决方案后-添加“”是正确的解决方案。为什么要删除答案批准？虽然添加2个空白列将“起作用”，但偏移类更正确一些。谢谢@JayD，我也这么认为。批准的答案没有什么“错误”，只是我的答案更正确。

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

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

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