В бутстрапе есть замечательная система сетки, которая подстраивается под разные размеры окна.
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;
}
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;
}
Спасибо! Круто!
ОтветитьУдалить