Bootstrap3'teki daha küçük cihazlarda oluk (varsayılan 30 piksel) azaltılsın mı?

Question

Önyükleme düzeninde 3 oluk 30px (bir sütunun her iki tarafında 15 piksel) olarak tanımlanır. Çalıştığım sorun şu ki, örneğin ekranımı küçültmek için küçültmek gerekirse, oluklar aşağıda görüldüğü gibi sütunlardan daha genişler (koyu mavi = sütun, açık mavi = oluk).

belirli çözünürlük durumlarının oluk genişliğini değiştirmek mümkün mü? (Mobil, tablet vb)

Answer 1

oluk Bu ekran boyutuna bağlı olarak değiştirmek için medya sorguları kullanabilirsiniz, bir sol ve sağ doldurma tarafından inşa geçerli:

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

Not da bu soruya bakın: Bootstrap 3 Gutter Size . Şebekenin her iki tarafındaki 'görsel' oluk açmak istediğinizde bunu kullanmalısınız. Bu durumda, ayrıca .container sınıfının dolgu malzemesini oluk boyutuna ayarlamanız gerekecektir. 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; 
    } 
} 

Answer 2

AZ mixin ve "sütun" sınıfı kullanılarak basit bir çözüm: önyükleme katmalar kullanılarak

.reduce-gutter(@size: 5px) { 
    .row { 
     .make-row(@size); 
    } 
    .row .col:first-child, 
    .row .col:last-child { 
     padding-right: @size; 
     padding-left: @size; 
    } 
} 

Answer 3

daha sağlam bir çözelti,:

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

Answer 4

I standardı kullanan (30px) oluk boyutu Kanalımın 6px olduğu küçük aygıtlar haricinde:

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

Answer 5

XS genişliği için normal ızgara oluklarının yarısına sahip olmak için Bootstrap karışımını tekrar yazmaya çalıştım. İyi çalışıyor gibi görünüyor.

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