Центрировать выравнивание столбца в twitter bootstrap

Ответ 1

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

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

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

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

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

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

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

Просто используйте класс bootstrap 3 offset col. т.е.

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

Ответ 2

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

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

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

Ответ 3

Если вы не можете поставить 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;
}

Кроме того, существует другое решение здесь

Ответ 4

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

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

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