четверг, 5 мая 2016 г.

Убираем отступы колонок Bootstrap

В бутстрапе есть замечательная система сетки, которая подстраивается под разные размеры окна. 

https://getbootstrap.com/examples/grid/

Но эта сетка идёт в комплекте с отступами, и часто приходится их обнулять. При большом количестве вложенных блоков, за этим тяжело уследить.

Есть выход - назначим всем "строкам", внутри которых отступы не нужны, специальный стиль с помощью класса "slim".

Таким образом, нам не потребуется добавлять правила обнуления для каждого блока, достаточно только указать

class="row slim"

Готовый код для вставки в CSS:

/* 
    Специальный класс для очистки от 
    вездесущих отрицательных границ и отступов бутстрапа. 

    Без него, контейнер и колонки добавляют отступы,
    а строки их нейтрализуют отрицательными границами.

    С этим приходится бороться, 
    обнуляя эти отступы и границы специальными правилами CSS.

    Чтобы не засорять файлы стилей постоянными обнулениями,
    мы зададим этот класс для всех строк, 
    которые не предполагают работы с границами и отступами.
*/
.row.slim {
    margin-left: 0;
    margin-right: 0;
}

.row.slim > [class^="col-"], .slim > [class*=" col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

1 комментарий: