Центрировать столбец в Twitter bootstrap [дубликат]


этот вопрос уже есть ответ здесь:

Я начал изучать Bootstrap. Мой вопрос заключается в том, как центрировать столбец по горизонтали, bootstrap содержит макет 12 столбцов, нет среднего числа. Чтобы быть более ясным, если это был макет 11 столбцов, середина число было бы 6 (5 столбцов слева, 1 столбец посередине, 5 столбцов справа)

4   51   2013-08-03 15:55:33

4 ответа:

вопрос Правильно ответил Здесь центр столбца с помощью Twitter Bootstrap 3

для нечетных строк: т. е. col-md-7 или col-large-9 Используйте это

добавьте col-центрированный в столбец, который вы хотите центрировать.

<div class="col-lg-11 col-centered">    

и добавьте это в свою таблицу стилей:

.col-centered{
float: none;
margin: 0 auto;
}

для четных строк: т. е. col-md-6 или col-large-10 используйте это

просто используйте класс col смещения bootstrap 3. т. е.,

<div class="col-lg-10 col-lg-offset-1">

с bootstrap 3 лучший способ добиться того, что вы хотите...с взаимозачет столбцов. Пожалуйста, смотрите эти примеры для более подробной информации:
http://getbootstrap.com/css/#grid-offsetting

короче говоря, и не видя ваших divs вот пример того, что может помочь, без использования каких-либо пользовательских классов. Просто обратите внимание, как "col-6 " используется и как половина из этого 3 ... так что "смещение-3" используется. Разделение поровну позволит по центру интервал, который вы собираетесь:

<div class="container">
<div class="col-sm-6 col-sm-offset-3">
your centered, floating column
</div></div>

Если вы не можете поместить 1 столбец, вы можете просто поместить 2 столбца в середине... (Я просто комбинирую ответы) Для Bootstrap 3

<div class="row">
   <div class="col-lg-5 ">5 columns left</div>
   <div class="col-lg-2 col-centered">2 column middle</div>
   <div class="col-lg-5">5 columns right</div>
</div>

даже можно текст по центру столбца, добавив это в стиле:

.col-centered{
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

кроме того, есть еще одно решение здесь

Я пробовал подходы, приведенные выше, но эти методы терпят неудачу, когда динамически высота содержимого в одном из cols увеличивается, он в основном толкает другие cols вниз.

для меня работало базовое решение компоновки таблицы.

// Apply this to the enclosing row
.row-centered {
  text-align: center;
  display: table-row;
}
// Apply this to the cols within the row
.col-centered {
  display: table-cell;
  float: none;
  vertical-align: top;
}