twitter bootstrap - cards - ¿Reduce la canaleta(por defecto 30px) en dispositivos más pequeños en Bootstrap3?

bootstrap panel

Question

En bootstrap 3 el canal se define como 30px (15px en cada lado de una columna). El problema que estoy corriendo es que, por ejemplo, si reduzco mi pantalla para que sea pequeña, las canaletas terminan siendo más anchas que las columnas mismas, como se ve a continuación (azul más oscuro = columna, azul claro = canaleta).

¿Puedes modificar el ancho del canal de ciertos estados de resolución? (móvil, tableta, etc.)

Answer 1

El canal se construye con un margen izquierdo y derecho, puede usar consultas de medios para cambiar esto dependiendo del tamaño de su pantalla:

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

Tenga en cuenta también ver esta pregunta: Bootstrap 3 Gutter Size . Debería usar esto cuando también quiera cambiar la canaleta ''visual'' en ambos lados de la grilla. En este caso, también tendrá que configurar el relleno de la clase .container al tamaño de su canaleta. ser

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

Solución simple usando la mezcla LESS y la clase "col":

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

Answer 3

Traté de reescribir Bootstrap mixin para tener la mitad de la cuadrícula normal para el ancho XS. Parece que funciona bien.

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

Answer 4

Una solución más robusta, usando bootstrap mixins:

@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 5

Utilizo un tamaño de canal estándar (30px) excepto en dispositivos pequeños donde mi canal es de 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";
}