Меняем отступы сетки (gutter-width) в Bootstrap

Дефолтова сетка в bootstrap 3 имеет размер 30 пикс. Понятно, что рабочий макет может содержать произвольные отступы и, если вы хотите использовать преимущества работы с grid от бутстрапа, придется как то их менять и фиксить.

Фактически нужно сделать две вещи:

  • Изменить margin строки (.row);
  • Изменить padding столбцов (.col-*) этой строки.

Вариант на CSS

Я начал с поиска готового решения, и нашел CSS вариант, который позволял обнулить значения, когда это требуется (вариант без зазора между ячейками сетки).

Если вы используете CSS, то на базе этого примера вы можете создать собственные стили для разных зазоров, которые требуются в вашем макете.

То же, но для LESS/SASS

Если же вы используете препроцессоры LESS/SASS, то пример можно преобразовать в такой миксин, избавляющий вас от некоторой рутины:

Написать комментарий

Мало букафф? Читайте есчо !

Переносы элементов сетки bootstrap разной высоты (фикс для версии 3.x)

Май 2, 2021 г.

В третей версии бутстрапа используется выравнивание элементов сетки col-* с помощью свойства float: left;. Пока элементы в сетке имеют одинаковую высоту, ...

Читать

Меняем поведение корневого пункта меню bootstrap dropdown

Апрель 14, 2022 г.

В bootstrap корневой пункт меню с подпунктами (dropdown menu) не является активной ссылкой и лишь служит кнопкой для развертывания подпунктов. Тем временем ...

Читать

 

Комментарии к «Меняем отступы сетки (gutter-width) в Bootstrap»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: