Я только начал работать с загрузкой и не уверен, как достичь своей цели.
Я бы хотел, чтобы все водосточные желоба были четными, как на этом изображении:
по умолчанию они выглядят так: вертикальные желоба между колонками (отмечены синим) удваивают горизонтальные и внешние желоба:
Любая помощь по наилучшему способу решения этого, вероятно, будет оценена.
попробовать:
.row {
margin-left: 0;
margin-right: 0;
}
Каждый столбец имеет прописку 15 px с обеих сторон. Который делает лоток между 30 px. В случае sm-grid ваш контейнерный класс будет 970px (((940px + @grid-gutter-width))). Каждый столбец имеет ширину 940/12. Получаемая ширина сетки-сетки/2 по обе стороны от сетка будет скрываться с отрицательным пределом - 15 пикселей;. Отменяя этот отрицательный левый край, установите обе стороны сетки 30 пикселей по обе стороны сетки. Этот желоб построен с 15px отступом столба + 15 px, сохраняющим пространство сетки.
обновление
В ответ на ответ @ElwoodP рассмотрим следующий код:
<div class="container" style="background-color:darkblue;">
<div class="row" style="background-color:yellow;">
<div class="col-md-9" style="background-color:green;">
<div style="background-color:lightblue;">div 1: .col-md-9</div>
<div class="row" style="background-color:orange;">
<div class="col-md-6" style="background-color:red;">
<div style="background-color:lightblue;">div 2: .col-md-6</div>
</div>
<div class="col-md-6" style="background-color:red;">
<div style="background-color:lightblue;">div 2: .col-md-6</div>
</div>
</div>
</div>
<div class="col-md-3" style="background-color:green;">
<div style="background-color:lightblue;">div 1: .col-md-3</div>
</div>
</div>
</div>
В случае вложения, манипуляция с классом .row действительно влияет на подсегмент. Хорошее или недостаток зависит от ваших ожиданий/требований к подсерии. Изменение поля .row не приведет к разрыву подсетей.
.rowс:
.row {
margin-left: 0;
margin-right: 0;
}
.containerс:
.container {
padding-left:30px;
padding-right:30px;
}
Обратите внимание, что вспомогательные сетки не должны быть обернуты внутри класса .container.
Я не думаю, что бас ответил правильно. Зачем прикасаться к краям строк? Они имеют отрицательный запас для смещения заполнения столбцов для столбцов на краю строки. Посредством этого будут разбиты любые вложенные строки.
Ответ прост, просто сделайте заполнение контейнера равным размеру желоба:
например, для начальной загрузки:
.container {
padding-left:30px;
padding-right:30px;
}
Вы можете сохранить поведение по умолчанию (с желобом) и добавить класс в таблицу стилей CSS для таких задач, как ваша:
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
И вот как вы можете использовать его в своем HTML:
<div class="row no-gutter">
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
</div>
Перед этой проблемой я сделал следующее дополнение к моей таблице стилей 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;
}
Это переопределяет стиль начальной загрузки и делает левую и правую стороны и равную ширину желоба.
Добавьте эти вспомогательные классы в таблицу стилей. (вы можете использовать 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:
<div class="row gutter-0">
<div class="col-sm-3 col-md-3 col-lg-3">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
</div>
</div>
<div class="row gutter-10">
<div class="col-sm-3 col-md-3 col-lg-3">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
</div>
</div>
<div class="row gutter-20">
<div class="col-sm-3 col-md-3 col-lg-3">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
</div>
</div>
Я застрял в этой проблеме, мое решение создало 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);
}
И использовать его...
<div class="row that-special-row"></div>
Фактическое решение возникло из этой проблемы, о котором упоминалось в github, что, по моему мнению, касается той же проблемы.
Решение: 2)
Другое решение - просто создать свой собственный CSS класс
.small-gutters {
margin-right: -10px;
margin-left: -10px;
> [class*="col-"] {
padding-right: 10px;
padding-left: 10px;
}
}
Надеюсь, что это поможет!
@Bass Jobsen и @ElwoodP попытались ответить на этот вопрос в обратном направлении - придают внешним краям такой же размер DOUBLE, как и водосточные желоба. 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 из файла bootstrap _variables.scss в ваши собственные файлы 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. Я считаю, что это самый чистый метод настройки размера желоба.