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

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

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

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

Вариант на CSS

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

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

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

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

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

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

Центровка по вертикали модального окна в Bootstrap

Май 5, 2017 г.

Модальные окна Bootstrap всем хороши, но имеют одну досадную недоработку - нет вертикальной центровки. Выглядит это недоразумение вот так: ...

Читать

Bootstrap extra large - стили для сетки свыше 1600 точек

Апрель 20, 2017 г.

3я версия Bootstrap определяет 4 размера сетки: <768px, ≥768px, ≥992px, ≥1200px. Этих размерностей явно не достаточно. В то время как на телефонах ...

Читать

 

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

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



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