Bootstrap – Как удалить желоб между столбцами

Я не знаю, правильно ли это делается, но как я могу удалить 30px желоба между столбцами? Но без margin-left: -30px set.

Лучшим способом удаления дополнений в столбцах было бы добавить 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).

  • Ширина ввода в Bootstrap 3
  • Система загрузочной сетки Bootstrap с разной высотой
  • Строки и столбцы Bootstrap. Нужно ли использовать строку?
  • Изменение цвета navbar в Twitter Загрузочный
  • Загрузочная карусель с несколькими кадрами одновременно
  • Лучший способ представить сетку или таблицу в AngularJS с помощью Bootstrap 3?
  • Должен ли я использовать Bootstrap из CDN или делать копию на моем сервере?
  • Расширить строку начальной загрузки за пределами контейнера
  • BootStrap3 сохраняет раскрывающееся меню после нажатия на элемент
  • Пять равных столбцов в twitter bootstrap
  • Почему Bootstrap 3 переключился на размер коробки: border-box?
  • Давайте будем гением компьютера.