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

  • Проблемы с Typeahead с Bootstrap 3.0 RC1
  • Как вы делаете Twitter-бутстрап-аккордеон, чтобы одна группа открылась?
  • Бутстрап-grid с фиксированной оболочкой. Предотrotation стеков столбцов
  • Строки и столбцы Bootstrap. Нужно ли использовать строку?
  • Изменение ширины бутстрапа
  • Ширина ввода в Bootstrap 3
  • BootStrap3 сохраняет раскрывающееся меню после нажатия на элемент
  • Управление порядком столбцов с использованием col-lg-push и col-lg-pull в Twitter. Загрузочный файл 3
  • Контейнер-жидкость против контейнера
  • Как обосновать navbar-nav в Bootstrap 3
  • Bootstrap 3 точки останова и медиа-запросы
  • Interesting Posts

    От «аккумулятора, подключенного, но не заряжающего» до «критического процесса»,

    Почему главный метод закрыт?

    Почему иногда клавиатура на моей клавиатуре не работает?

    Вычислить пропускную способность процессора в битах в секунду

    Visual Studio 2013 и инструмент настройки веб-конфигурации ASP.NET

    Как передать параметр запроса или маршрута в AWS Lambda из Amazon API Gateway

    Выделение одного указателя структуры другому – C

    Положите разрыв в Y-оси гистограммы

    Получите 3D-координаты из пикселя 2D-изображения, если известны внешние и внутренние параметры

    Открыть новое всплывающее окно без адресных баров в firefox & IE

    Получить внутренний XML-узел узла как String в Java DOM

    Почему мой компьютер Windows 7 замерзает после пробуждения от сна?

    R: Замена отрицательных значений на ноль

    ASP.NET MVC 3: DefaultModelBinder с наследованием / polymorphismом

    функция cat вызывает read () бесконечное время

    Давайте будем гением компьютера.