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).