Как центрировать div с помощью Bootstrap 2?

Question

http://twitter.github.com/bootstrap/scaffolding.html

Пробовал все комбинации:

родовое слово

или

родовое слово

изменены номера пролета и смещения ...

Но я не могу получить простой прямоугольник, идеально центрированный на странице :(

Мне просто нужен прямоугольник шириной в 6 столбцов по центру ...

---

изменить:

сделал это с

родовое слово

Но коробка слишком широкая, могу ли я сделать это с помощью span7?

span7 offset2 дает дополнительное заполнение слева. span7 offset3 дополнительное заполнение справа ...

Answer 1

помимо сжатия самого div до желаемого размера, за счет уменьшения размера диапазона, например, так ... class="span6 offset3", class="span4 offset4" и т. д. что-то простое, например, style="text-align: center" в div, может иметь тот эффект, который вы ищете

вы не можете использовать span7 с любым заданным смещением и центрировать диапазон на странице (потому что общее количество spans= 12)

Answer 2

Интервалы начальной загрузки смещены влево.Все, что нужно для их центрирования, - это переопределить это поведение.Я делаю это, добавляя это в свою таблицу стилей:

родовое слово

Если у вас есть этот класс, просто добавьте его в диапазон, и все готово.

родовое слово

Обратите внимание, что этот настраиваемый класс центра должен быть определен после начальной загрузки css.Вы можете использовать !important, но это не рекомендуется.

Answer 3

Bootstrap3 имеет класс .center-block, который вы можете использовать.Он определяется как

родовое слово

Документация здесь .

Answer 4

Если вы хотите использовать полную загрузку (а не автоматический режим влево / вправо), вам понадобится шаблон, который поместится в 12 столбцах, например.2 заготовки, 8 содержимого, 2 заготовки.Вот что будет делать эта установка. Он охватывает только варианты -md- , я стараюсь сделать его полноразмерным для небольших, добавив col-xs-12

родовое слово

Answer 5

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

родовое слово

и стиль:

родовое слово

Это должно работать нормально, если вы вложены где-то в div-код начальной загрузки .container.

Answer 6

добавить содержимое центра класса

родовое слово

Answer 7

Код @ZuhaibAli вроде как работает для меня, но я немного его изменил:

Я создал новый класс в css

родовое слово

затем div становится

родовое слово

Я добавил col-md-6 для ширины самого div, что в этой ситуации означало, что div вдвое меньше, в начальной загрузке есть 1-12 col md.

Answer 8

Следуйте этому руководству https://getbootstrap.com/docs/3.3/css/

Использовать общий кодовый тег

родовое слово