Как центрировать/добавлять поля в сетку бутстрапов?

-1

У меня есть PSD-дизайн, где сетка выглядит так: Grid image Изображение только показывает части PSD, потому что у меня нет прав публиковать его публично. Но, как вы видите, сетка (синие полосы) не идет из стороны в сторону, как сетка с расширением. Он начинает 120px внутри и заканчивает 120px перед экраном (говоря об итогах 12 столбцов, а не о каждом столбце)Как центрировать/добавлять поля в сетку бутстрапов?

Я использую бутстрап при кодировании этого PSD, и сетка начальной загрузки переходит с одной стороны на другую.

Мой вопрос: как я могу изменить загрузочную сетку (центрировать ее/добавить поля), чтобы она выглядела так же, как сетка в psd i.e запускает 120 пикселей на экране и заканчивает 120 пикселей до окончания экрана?

Мне не нужно иметь контент вне сетки, как в PSD. Поэтому мне нужно будет, чтобы строки шли из стороны в сторону, но столбцы, чтобы начать немного, и немного закончите, прежде чем экран будет делать. Я не могу использовать контейнер бутстрапа вместо контейнерной жидкости, так как он также будет брать строки. Я также не могу использовать смещение, так как тогда я «потеряю» некоторые из столбцов и больше не буду иметь 12-столбцов для каждой строки.

Мой HTML-файл содержит стандартной сетки жидкости

<div class="container-fluid> 
    <div class="row"> 
    <!-- A few columns in different sizes --> 
    </div> 
    <div class="row"> 
    <!-- A few columns in different sizes --> 
    </div> 
    <div class="row"> 
    <!-- A few columns in different sizes --> 
    </div> 
</div>

источник

2016-04-08 Tobias Bredenberg

Вам нужно разместить Ваш HTML – 4castle

Является ли каждый из 12 синих полос, как предполагается, является одним из элементов сетки? – BSMP

BSMP Correct :) –

Добавить следующее в ваш css

.row{padding: 0 120px;}

источник

2016-04-08 21:06:13

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

lol, не могу поверить, что я пропустил это! Большое спасибо! –

Это работает, но предостережение следует использовать только для внешних строк: '.container-fluid> .row {padding: 0 120px;}'. Также он создает огромный внешний интервал на мобильных экранах, который не идеален для реагирования. http://codeply.com/view/ynHJCDDqUd?viewport=xs – ZimSystem

Я не уверен, если я полностью понимаю ваш вопрос, но вы можете попробовать следующее:

Добавить контейнер (Bootstrap container)
Добавить запас с помощью CSS: .col-sm-4 {margin:Your margin here;}

источник

2016-04-08 20:38:48

См. Комментарии выше :) –

Это действительно зависит от того, какое другое содержимое будет внутри строк? Если столбцам не нужно идти из стороны в сторону, почему бы просто не использовать Bootstrap .container? Вы все еще можете иметь полное содержание ширина за пределами container ..

http://codeply.com/go/HwIDGQpdbO

источник

2016-04-08 21:08:12 ZimSystem

Как центрировать/добавлять поля в сетку бутстрапов?

ответ

Смежные вопросы