Bootstrap: два столбца по центру

Я пытаюсь иметь двухколоночный центрированный макет с Bootstrap 3.1. Я читал это: как центрировать загрузочный div с классом "spanX"?, но содержимое по-прежнему выровнено слева. Вот мой 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

6
css html twitter-bootstrap twitter-bootstrap-3

3 ответов

добавьте контейнер, удалите центральный 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>
6

вы хотели бы использовать столбцами класс. Если вы используете сборку 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>
8

попробовать

.row {
  margin:0px auto;
}
-2