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

Question

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

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

центр столбца с помощью Twitter Bootstrap

29 ответов

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

606 4

twitter-bootstrap alignment

4 ответов:

Comments

Ничего не найдено.

Lawrence Black · Accepted Answer · 2017-05-23 15:10:43

вопрос Правильно ответил Здесь центр столбца с помощью 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">

martenc · Accepted Answer · 2013-12-15 19:58:35

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

efirat · Accepted Answer · 2014-07-11 17:55:48

Если вы не можете поместить 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;
}
кроме того, есть еще одно решение здесь

SkyKOG · Accepted Answer · 2014-12-12 15:12:37

Я пробовал подходы, приведенные выше, но эти методы терпят неудачу, когда динамически высота содержимого в одном из 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;
}