Бутстрап 3 Размер желоба

Я только начал работать с бутстрапом и не знаю, как достичь своей цели.

Я хотел бы, чтобы все столы были ровными, как будто они находятся на этом изображении:

введите описание изображения здесь

по умолчанию они выглядят так: вертикальные желоба между колоннами (отмечены синим) являются двойными горизонтальными и внешними желобами:

введите описание изображения здесь

Любая помощь по наилучшему способу решить это, вероятно, будет оценена по достоинству.

пытаться:

.row { margin-left: 0; margin-right: 0; } 

Каждый столбец имеет прописку 15 px с обеих сторон. Который делает лоток между 30 px. В случае sm-grid ваш контейнерный class будет 970px (((940px + @ grid-gutter-width))). Каждый столбец имеет ширину 940/12. Результирующая grid-grid ширины / 2 на обеих сторонах сетки будет скрыта с отрицательным краем – 15 пикселей ;. Отменяя этот отрицательный левый край, установите обе стороны сетки 30 пикселей по обе стороны сетки. Этот желоб построен с 15px дополнением колонки + 15 px покоя сетки пространства.

Обновить

В ответ на ответ @ElwoodP рассмотрите следующий код:

 
div 1: .col-md-9
div 2: .col-md-6
div 2: .col-md-6
div 1: .col-md-3

В случае вложенности манипуляция class .row действительно влияет на подсетевую сетку. Хорошее или недостаток зависит от ваших ожиданий / требований к подсерии. Изменение поля .row не приведет к разрыву .row .

по умолчанию:

введите описание изображения здесь

край classа .row

с:

 .row { margin-left: 0; margin-right: 0; } 

введите описание изображения здесь

заполнение classа .container

с:

 .container { padding-left:30px; padding-right:30px; } 

введите описание изображения здесь

Обратите внимание, что вспомогательные сетки не должны быть обернуты внутри classа .container .

Я не думаю, что ответ Басса верен. Зачем прикасаться к краям строк? Они имеют отрицательный запас для смещения заполнения столбцов для столбцов на краю строки. Посредством этого будут разбиты любые вложенные строки.

Ответ прост, просто сделайте заполнение контейнера равным размеру желоба:

например, для начальной загрузки:

 .container { padding-left:30px; padding-right:30px; } 

http://jsfiddle.net/3wBE3/61/

Вы можете сохранить поведение по умолчанию (с желобом) и добавить class в таблицу стилей CSS для таких задач, как ваша:

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

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

 
...
...
...

Перед этой проблемой я сделал следующее дополнение к моей таблице стилей CSS:

 #mainContent .container { padding-left:16px; padding-right:16px; } #mainContent .row { margin-left: -8px; margin-right: -8px; } #mainContent .col-xs-1, #mainContent .col-sm-1, #mainContent .col-md-1, #mainContent .col-lg-1, #mainContent .col-xs-2, #mainContent .col-sm-2, #mainContent .col-md-2, #mainContent .col-lg-2, #mainContent .col-xs-3, #mainContent .col-sm-3, #mainContent .col-md-3, #mainContent .col-lg-3, #mainContent .col-xs-4, #mainContent .col-sm-4, #mainContent .col-md-4, #mainContent .col-lg-4, #mainContent .col-xs-5, #mainContent .col-sm-5, #mainContent .col-md-5, #mainContent .col-lg-5, #mainContent .col-xs-6, #mainContent .col-sm-6, #mainContent .col-md-6, #mainContent .col-lg-6, #mainContent .col-xs-7, #mainContent .col-sm-7, #mainContent .col-md-7, #mainContent .col-lg-7, #mainContent .col-xs-8, #mainContent .col-sm-8, #mainContent .col-md-8, #mainContent .col-lg-8, #mainContent .col-xs-9, #mainContent .col-sm-9, #mainContent .col-md-9, #mainContent .col-lg-9, #mainContent .col-xs-10, #mainContent .col-sm-10, #mainContent .col-md-10, #mainContent .col-lg-10, #mainContent .col-xs-11, #mainContent .col-sm-11, #mainContent .col-md-11, #mainContent .col-lg-11, #mainContent .col-xs-12, #mainContent .col-sm-12, #mainContent .col-md-12, #mainContent .col-lg-12 { padding-left: 8px; padding-right: 8px; } 

Это переопределяет стиль начальной загрузки и делает левую и правую стороны и равную ширину желоба.

Добавьте эти вспомогательные classы в stylesheet.less (вы можете использовать http://less2css.org/ для компиляции их в CSS)

 .row.gutter-0 { margin-left: 0; margin-right: 0; [class*="col-"] { padding-left: 0; padding-right: 0; } } .row.gutter-10 { margin-left: -5px; margin-right: -5px; [class*="col-"] { padding-left: 5px; padding-right: 5px; } } .row.gutter-20 { margin-left: -10px; margin-right: -10px; [class*="col-"] { padding-left: 10px; padding-right: 10px; } } 

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

 

Я застрял в этой проблеме, мое решение создало mixin, который позволяет мне указывать в SCSS, фактический размер желоба, который я хочу …

Решение: 1)

 @mixin add-gutter($size) { margin-right: -$size; margin-left: -$size; > [class*="col-"] { padding-right: $size; padding-left: $size; } } .that-special-row{ @include add-gutter(7px); } 

И использовать его …

 

Фактическое решение возникло из этой проблемы, упомянутой в github, которая, по моему мнению, касается той же проблемы.

Решение: 2)

Еще одно решение – просто создать свой собственный class CSS

 .small-gutters { margin-right: -10px; margin-left: -10px; > [class*="col-"] { padding-right: 10px; padding-left: 10px; } } 

Надеюсь, это поможет!

@Bass Jobsen и @ElwoodP попытались ответить на этот вопрос в обратном направлении – придание внешним краям того же ДВОЙНОГО размера, что и водосточные желоба. OP (и я, также) искал способ иметь ЕДИНСТВЕННЫЙ желоб размером во всех местах. Вот правильные корректировки CSS для этого:

 .row { margin-left: -7px; margin-right: -7px; } .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { padding-left: 7px; padding-right: 7px; } .container { padding-left: 14px; padding-right: 14px; } 

Это оставляет во всех местах 14px и внешний край.

Если вы используете sass в своем собственном проекте, вы можете переопределить размер желоба для начальной загрузки, скопировав переменные sass из файла _variables.scss bootstrap в собственный файл sass-файлов где-нибудь, например:

 // Grid columns // // Set the number of columns and specify the width of the gutters. $grid-gutter-width-base: 50px !default; $grid-gutter-widths: ( xs: $grid-gutter-width-base, sm: $grid-gutter-width-base, md: $grid-gutter-width-base, lg: $grid-gutter-width-base, xl: $grid-gutter-width-base ) !default; 

Теперь ваши желоба будут 50px вместо 30px. Я считаю, что это самый чистый метод настройки размера желоба.

  • Bootstrap: как складывать divs разной высоты?
  • Обозначение с левой стороны вместо поля ввода
  • Bootstrap 3 не может правильно отобразить глификон
  • Bootstrap - Как удалить желоб между столбцами
  • Загрузочный твиттер 3 Модаль с нокаутом
  • twitter bootstrap 3 минимальная версия jquery
  • Строки и столбцы Bootstrap. Нужно ли использовать строку?
  • icons Bootstrap загружаются локально, но не в Интернете
  • Центрирование логотипа бренда в Bootstrap 3 Navbar
  • Событие bootstrap jquery show.bs.modal не будет срабатывать
  • Расширить строку начальной загрузки за пределами контейнера
  • Давайте будем гением компьютера.