Bootstrap：以列为中心 [英] Bootstrap: two column centered

问题描述

我试图用Bootstrap 3.1创建一个两列居中的布局。
我读过这个：如何将Bootstrap div与'spanX'类集中？，但内容与stil左对齐。这是我的HTML：

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:

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

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

推荐答案

添加一个容器，删除中心div并在两边添加两个空白col-lg-2，这样可以添加12列：

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

这篇关于Bootstrap：以列为中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！