Как вы получаете центрированный контент с помощью Twitter Bootstrap?

Question

Я пытаюсь следовать очень простому примеру. Используя начальную страницу и систему координат , я надеялся на следующее:

<div class="row">
  <div class="span12">
    <h1>Bootstrap starter template</h1>
    <p>Example text.</p>
  </div>
</div>

... приведет к центрированному тексту.

Однако, он все еще появляется в крайнем левом углу. Что я делаю не так?

Answer 1

Я попробовал два способа, и он работал нормально, чтобы центрировать div.Оба способа выровняют div на всех экранах.

Способ 1: Использование Push:

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-push-4 col-md-push-4 col-sm-push-4 col-xs-push-4" style="border-style:solid;border-width:1px">
    <h2>Grievance form</h2> <!-- To center this text, use style="text-align: center" -->
  </div>

Способ 2: Использование смещения:

<div class = "col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-offset-4 col-md-offest-4 col-sm-offest-4 col-xs-offest-4" style="border-style:solid;border-width:1px">
    <h2>Grievance form</h2> <!--to center this text, use style="text-align: center"-->
</div>

Результат:

Объяснение

Bootstrap будет обозначать слева первый столбец указанной занятости экрана.Если мы используем смещение или толчок, он сместит столбец «this» на «эти» множество столбцов.Хотя я столкнулся с некоторыми проблемами, связанными с отзывчивостью смещения, push был потрясающим.

Answer 2

Просто используйте класс text-center для тега div или тега, который вы хотите. Я думаю, что это может работать нормально. Это класс Bootstrap для выравнивания текста по центру.

Вот некоторые классы Bootstrap для выравнивания текста:

text-left, text-right, text-justify, etc.
<div class="row">
 <div class="col-md-12 text-center">
  <h1>Bootstrap starter template</h1>
  <p>Example text.</p>
 </div>
</div>

Answer 3

Я создал этот класс, чтобы сохранить его центрирование независимо от размера экрана при сохранении отзывчивых функций:

.container {
    alignment-adjust: central;
}