Bootstrap：两列居中答案

【问题标题】：Bootstrap: two column centeredBootstrap：两列居中
【发布时间】：2019-12-04 16:47:11
【问题描述】：

我正在尝试使用 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

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案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>

【讨论】：

为什么要删除答案批准？
虽然添加 2 个空白列会“起作用”，但偏移类更正确。
谢谢@JayD 我也这么认为。批准的答案没有任何“错误”，只是我的答案更正确。

【解决方案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>

【讨论】：

欢迎您。如果有帮助，请批准答案。
应该使用 col-lg-offset-2 代替
你应该使用偏移量
非常感谢。几个小时后查看了许多解决方案 - 添加 '
' 是正确的解决方案。

【解决方案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> 中放入多少列（或列的类型）并不重要

【讨论】：

【解决方案4】：

试试

.row {
  margin:0px auto;
}

【讨论】：

它似乎没有改变任何东西。