В бутстрапе 3 желоба определяется как 30px (15px с каждой стороны столбца). Проблема, которую я запускаю, заключается в том, что, например, если я сжимаю свой экран до крошечного, то канавки становятся шире, чем сами столбцы, как показано ниже (более темный синий = столбец, более светлый синий = водосточный желоб).
Можете ли вы изменить ширину желоба определенных состояний разрешения? (мобильный, планшет и т.д.)
Водосток построен с помощью левого и правого заполнения, вы можете использовать медиа-запросы, чтобы изменить это в зависимости от размера экрана:
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px)
{
div[class^="col"]{padding-left:5px; padding-right:5px;}
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px)
{
div[class^="col"]{padding-left:10px; padding-right:10px;}
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px)
{
/*default so you don't need this*/
div[class^="col"]{padding-left:15px; padding-right:15px;}
}
Обратите внимание также на этот вопрос: Bootstrap 3 Gutter Size. Вы должны использовать это, когда вы также хотите изменить "визуальный" желоб по обе стороны сетки. В этом случае вам также нужно будет установить дополнение класса .container к размеру вашего желоба. b.e.
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px)
{
/*default so you don't need this*/
div[class^="col"]{padding-left:85px; padding-right:85px;}
.container{padding-left:85px; padding-right:85px;}
.row {
margin-left: 0;
margin-right: 0;
}
}
Более надежное решение с использованием бутстрапов-микшинов:
@sm-gutter: 10px;
@md-gutter: 50px;
@lg-gutter: 100px;
.my-container {
@media (min-width: @screen-sm-min) {
width: @container-sm;
.container-fixed(@gutter: @sm-gutter);
}
@media (min-width: @screen-md-min) {
width: @container-md;
.container-fixed(@gutter: @md-gutter);
}
@media (min-width: @screen-lg-min) {
width: @container-lg;
.container-fixed(@gutter: @lg-gutter);
}
}
.my-row {
@media (min-width: @screen-sm-min) {
.make-row(@gutter: @sm-gutter);
}
@media (min-width: @screen-md-min) {
.make-row(@gutter: @md-gutter);
}
@media (min-width: @screen-lg-min) {
.make-row(@gutter: @lg-gutter);
}
}
.my-4-col {
@media (min-width: @screen-sm-min) {
.make-sm-column(4, @sm-gutter);
}
@media (min-width: @screen-md-min) {
.make-md-column(4, @md-gutter);
}
@media (min-width: @screen-lg-min) {
.make-lg-column(4, @lg-gutter);
}
}
Простое решение с использованием LESS mixin и класса "col":
.reduce-gutter(@size: 5px) {
.row {
.make-row(@size);
}
.row .col:first-child,
.row .col:last-child {
padding-right: @size;
padding-left: @size;
}
}
Я использую стандартный (30px) размер желоба, за исключением небольших устройств, где мой желоб имеет 6px:
@media (max-width: $screen-sm-min - 1) {
$grid-gutter-width: 6px; // redefining
// also redefine $navbar-padding-horizontal in the scope because it depend on $grid-gutter-width
$navbar-padding-horizontal: floor(($grid-gutter-width / 2));
@import "../bootstrap/bootstrap/forms";
@import "../bootstrap/bootstrap/grid";
@import "../bootstrap/bootstrap/navbar";
}
Я попытался переписать бутстрап mixin, чтобы иметь половину нормального сетчатого желоба для ширины XS. Кажется, отлично работает.
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
@media(max-width: @screen-xs-min) {
padding-left: (@gutter / 4);
padding-right: (@gutter / 4);
};
}
.make-row(@gutter: @grid-gutter-width) {
@media(max-width: @screen-xs-min) {
margin-left: (@gutter / -4);
margin-right: (@gutter / -4);
}
}
.container-fixed() {
@media(max-width: @screen-xs-min) {
padding-left: (@grid-gutter-width / 4);
padding-right: (@grid-gutter-width / 4);
}
}