Bootstrap – Как удалить желоб между столбцами
Я не знаю, правильно ли это делается, но как я могу удалить 30px желоба между столбцами? Но без margin-left: -30px set.
- Bootstrap 3 - Как загрузить контент в модальном теле через AJAX?
- Внедрение jQuery DatePicker в Bootstrap modal
- Сохранять раскрывающееся окно Bootstrap при нажатии
- Бутстрап-grid с фиксированной оболочкой. Предотrotation стеков столбцов
- Событие bootstrap jquery show.bs.modal не будет срабатывать
- Bootstrap изменяет порядок div с помощью pull-right, pull-left на 3 столбца
- Как использовать Twitter Bootstrap 3 для сайта, не отвечающего требованиям?
- Отзывчивый веб-сайт уменьшен до полной ширины на мобильном телефоне
- Используйте раскрывающееся меню Bootstrap 3 в качестве контекстного меню
- В чем разница между col-lg- *, col-md- * и col-sm- * в Bootstrap?
- Bootstrap 3 Свернуть
- Передайте несколько параметров обработчикам событий в React
- Выпадающее меню выпадающего списка Bootstrap отсутствует
Лучшим способом удаления дополнений в столбцах было бы добавить class .no-pad
в ваш .row
:
… и затем добавьте этот CSS.
.row.no-pad { margin-right:0; margin-left:0; } .row.no-pad > [class*='col-'] { padding-right:0; padding-left:0; }
Плохая идея – искать предметы first-
и last-child
, так как фактически .row
должны заботиться о этих смещениях в правом и левом видовом .row
. С помощью вышеуказанного метода все .col-*
s остаются идентичными, что также намного проще при рассмотрении отзывчивости, особенно при укладке на мобильные размеры (попробуйте мою демонстрацию ниже md
).
Селектор CSS с прямым потомком означает, что .no-pad
будет применен только к непосредственному дочернему .col
s .col
s, поэтому вы можете иметь дополнение к вложенным структурам столбцов (или нет), если хотите.
Также использование селектора атрибутов [class*='col-']
означает, что в каждый столбец не добавляются дополнительные classы, отличные от Bootstrap.
Вот демонстрация: http://www.bootply.com/Ae3xTyAW5D
Обновление 2018 года
Bootstrap 4 теперь включает class .no-gutters
который вы можете просто добавить в .row
.
x x x
Bootstrap 4: http://www.codeply.com/go/OBW3RK1ErD
Бутстрап 3 желоба создаются с использованием прокладки. Вы также должны отрегулировать отрицательный запас так, чтобы промежуток вокруг внешних столбцов не выполнялся.
.no-gutter { margin-right: 0; margin-left: 0; } .no-gutter > [class*="col-"] { padding-right: 0; padding-left: 0; }
Просто добавьте class no-gutter
в .row
.
Демо: http://bootply.com/107458
Вместо того, чтобы применять исправления, которые трудно поддерживать, я предлагаю создать собственную настраиваемую версию Bootstrap из Customizer, где вы можете установить нужный размер желоба (или удалить его полностью, установив его на 0).