Сетка с использованием Bootstrap 3.0

Мне нужно создать сетку с использованием Bootstrap 3.0 с пробелом между столбцами. Я использую строку и 4 столбца с шириной 3. Однако все они появляются вместе без какого-либо промежутка между ними. Как я могу это сделать?Сетка с использованием Bootstrap 3.0

Пример:

<div class="row"> 
    <div class="col-lg-3" style="background-color: grey;"> 
    col1 
    </div> 
    <div class="col-lg-3" style="background-color: grey;"> 
    col2 
    </div> 
    <div class="col-lg-3" style="background-color: grey;"> 
    col3 
    </div> 
    <div class="col-lg-3" style="background-color: grey;"> 
    col4 
    </div> 
</div>

источник

2013-08-16 Caumons

Вы прочитали [здесь] (http://getbootstrap.com/css/#grid)? –

Смотрите мой комментарий к ответу, я уже цитировал ту же ссылку. Он ничего не говорит о том, как оставить пространство между столбцами. Если вы используете margin, тогда есть переполнение ширины – Caumons

Учитывая, что я опубликовал ссылку за 2 минуты до того, как вы в значительной степени ставите вас в странное место, не так ли? Более того, вы не следуете указанному здесь коду. Попробуйте 'col-md- *' –

После обсуждения с @ShaharGalukman, кажется, что Bootstrap 3.0 не поддерживает эту функцию изначально. Итак, что я сделал:

Создайте сетку, используя синтаксис Bootstrap 3.0 со всеми столбцами вместе. Затем вместо того, чтобы устанавливать цвет фона в div col, я создал новый div внутри каждого col, который содержит настройку background-color. Таким образом, у вас есть разделения между столбцами. Вы можете отрегулировать пробел с margin нового div. Установка margin: -15px не оставляет места между столбцами.

Надеюсь, это поможет кому-то еще!

<div class="row"> 
    <div class="col-lg-3"> 
    <div style="background-color: grey;"> 
     col1 
    </div> 
    </div> 
    <div class="col-lg-3"> 
    <div style="background-color: grey;"> 
     col2 
    </div> 
    </div> 
    <div class="col-lg-3"> 
    <div style="background-color: grey;"> 
     col3 
    </div> 
    </div> 
    <div class="col-lg-3"> 
    <div style="background-color: grey;"> 
     col4 
    </div> 
    </div> 
</div>

источник

2013-08-16 21:04:51 Caumons

Я никогда не использовал и не слышал о классе boostrap "Col-LG-3". Я использую «spanX», где X - количество столбцов в сетке с 12 столбцами.

<div class="row"> 
    <div class="span3" style="background-color: grey;"> 
    col1 
    </div> 
    <div class="span3" style="background-color: grey;"> 
    col2 
    </div> 
    <div class="span3" style="background-color: grey;"> 
    col3 
    </div> 
    <div class="span3" style="background-color: grey;"> 
    col4 
    </div> 
</div>

источник

2013-08-16 20:26:34 ktm5124

BS 3.0 использует совершенно иную систему имен для классов сетки. –

О, я вижу. :-( – ktm5124

Использование 'span' - это синтаксис для Bootstrap 2, новая версия 3 использует другой синтаксис, см. Http://getbootstrap.com/css/#grid – Caumons

Сетка с использованием Bootstrap 3.0

ответ

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