Уменьшите желобок (по умолчанию 30 пикселей) на небольших устройствах в Bootstrap3?

В бутстрапе 3 желоба определяется как 30px (15px с каждой стороны столбца). Проблема, которую я запускаю, заключается в том, что, например, если я сжимаю свой экран до крошечного, то канавки становятся шире, чем сами столбцы, как показано ниже (более темный синий = столбец, более светлый синий = водосточный желоб).

enter image description here

Можете ли вы изменить ширину желоба определенных состояний разрешения? (мобильный, планшет и т.д.)

Ответы

Ответ 1

Водосток построен с помощью левого и правого заполнения, вы можете использовать медиа-запросы, чтобы изменить это в зависимости от размера экрана:

/* 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;
    }
}

Ответ 2

Более надежное решение с использованием бутстрапов-микшинов:

@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);
  }
}

Ответ 3

Простое решение с использованием 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;
    }
}

Ответ 4

Я использую стандартный (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";
}

Ответ 5

Я попытался переписать бутстрап 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);
    }
}