Позиционирование сетки Bootstrap

поэтому я пытаюсь сделать сайт начальной загрузки, но я не знаю, как настроить ширину и положение этих сеток. Я начинающий начинающий. Не могли бы вы мне помочь? Это НЕ должно быть точно так плохо, но мне нужно сохранить макет.

Как это должно выглядеть: http://i.imgur.com/WAE161o.png

HTML:

<div>
 <div>
 <div>
 </div>
 <!--THIS ONE IS FOR THE MIDDLE, CENTERED AD-->
 <div>
 </div>
 <div>
 </div>
 </div>

 <div>
 <div>
 </div>
 <!--THIS ONE IS FOR BUTTONS STICKED TO THE POST ON THE LEFT-->
 <div>
 </div>
 <!--THIS ONE IS FOR THE POST AND BUTTONS STICKED ON THE BOTTOM-->
 <div>
 </div>
 <!--THIS ONE IS FOR THE SIDEBAR-->
 <div>
 </div>
 <div>
 </div>
 </div>
</div>
2 ответа

Из выпуска Bootstrap 3.0

col-vp-push-x = нажмите столбец справа на x количество столбцов, начиная с того места, где обычно будет отображаться столбец → position: relative, на vp или увеличенном представлении-порте.

col-vp-pull-x = pull the column to the left by x number of columns, starting from where the column would normally render -> position: relative, on a vp or larger view-port.

vp = xs, sm, md, or lg

x = 1 thru 12

Таким образом, ответ на ваш вопрос - столбцы push/pull. Например, ваша строка объявлений должна выглядеть примерно так:

<div>

 <div>
 your center column
 </div>
</div>

и так далее. Смотрите здесь скрипку


Если вам нужны конкретные столбцы с шириной в пикселях, вы не можете использовать сетку Bootstrap. Сетка Bootstrap разбита на 12 столбцов равного размера. Вы все равно можете использовать Bootstrap, а не часть сетки. Существует ограниченная настройка, которая может быть выполнена с помощью сетки, но я не думаю, что она может приблизиться к тому, что вы пытаетесь сделать. Вам нужно будет использовать собственный CSS, чтобы разместить сайт так, как вы хотите.

Если вы просто хотите что-то подобное и не заботитесь о точной ширине, вы должны следовать документации по сетке. Вы двигаетесь в правильном направлении, но когда у вас есть вложенные столбцы, вам нужно убедиться, что вы завершаете строку, которой у вас нет. Вы также можете использовать стили col-md-offset- * для сдвига столбцов, поэтому вам не нужно "использовать" все 12 столбцов. Например, для основной части сайта вам может понадобиться, чтобы первый столбец был ".col-md-3.col-md-offset-4" и второй ".col-md-3".

licensed under cc by-sa 3.0 with attribution.