Bootstrap - Как убрать водосточный желоб между колоннами

Ответ 1

Лучшим способом удаления дополнений в столбцах было бы добавить класс .no-pad к вашему .row:

 <div class="row no-pad">

... и затем добавьте этот 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 предназначен для ухода за этими смещениями в окне просмотра справа и слева. С помощью вышеуказанного метода все .col-* остаются идентичными, что также намного проще при рассмотрении отзывчивости, особенно при укладке на мобильные размеры (попробуйте мою демонстрацию ниже размера md).

Селектор CSS с прямым потомком > означает, что .no-pad будет применяться только к этому .row непосредственному дочернему элементу .col s, так что вы можете иметь дополнение к структурам впоследствии вложенных столбцов (или нет), если вы желание.

Также использование селектора атрибутов [class*='col-'] означает, что в каждый столбец не добавляются дополнительные классы, отличные от Bootstrap.

Вот демо: http://www.bootply.com/Ae3xTyAW5D

Ответ 2

Обновление 2018

Bootstrap 4 теперь включает класс .no-gutters, который вы можете просто добавить в .row.

<div class="row no-gutters">
    <div class="col">x</div>
    <div class="col">x</div>
    <div class="col">x</div>
</div>

Bootstrap 4: http://www.codeply.com/go/OBW3RK1ErD

Bootstrap 3.4. 0+ желоба создаются с использованием отступов, но в них добавлен класс .row-no-gutters. См. документацию для Bootstrap 3.4 и найдите "Удалить желоба".

HTML вы можете использовать:

<div class="row row-no-gutters">
    <div class="col">x</div>
    <div class="col">x</div>
    <div class="col">x</div>
</div>

Bootstrap 3+, & lt; = 3.3.9 желоба создаются с помощью заполнения. Вы также должны отрегулировать отрицательное поле, чтобы не влиять расстояние вокруг внешних столбцов.

.no-gutter {
  margin-right: 0;
  margin-left: 0;
}

.no-gutter > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

Просто добавьте класс no-gutter в .row.

Демонстрация: http://bootply.com/107458

Ответ 3

Вместо применения исправлений, которые трудно поддерживать, я предлагаю создать собственную настраиваемую версию Bootstrap из Customizer, где вы можете установить желоб (или удалить его полностью, установив его на 0).

Ответ 4

Bootstrap 3 представил класс .row-no-gutters в v3.4.0, который работает именно так, как рекламируется.

Чтобы удалить желоба из строки и ее столбцов, просто добавьте этот класс в <div>.