Soy bastante novato con Foundation, pero ¿existe la posibilidad de que el ancho de la cuadrícula predeterminada sea mayor, o mejor, solo el 80% del ancho de la pantalla con un ancho mínimo adicional?
Si no es posible con Foundation, ¿es posible con Bootstrap?
Respuestas
1 para la respuesta № 1Una de las cosas buenas de Foundation 3 es que está construido con HABLAR CON DESCARO A, por lo que el CSS para el sistema de cuadrícula depende completamente de las variables.
El ancho de la fila está diseñado scss/foundation/components/_grid.scss:
/* The Grid ---------------------- */
.row { width: $rowWidth; max-width: 100%; min-width: $screenSmall; margin: 0 auto;
.row { width: auto; max-width: none; min-width: 0; margin: 0 (-($columnGutter/2)); }
&.collapse {
.column, .columns { padding: 0; }
}
.row { width: auto; max-width: none; min-width: 0; margin: 0 (-($columnGutter/2));
&.collapse { margin: 0; }
}
}
El ancho total de la fila depende del $rowWidth variable, que a su vez se define en scss/foundation/_settings.scss:
// Grid Settings
$rowWidth: 1000px !default;
$columnGutter: 30px !default;
$totalColumns: 12 !default;
$mobileTotalColumns: 4 !default;
$blockGridElements: 12 !default; // Highest number of block grid elements, Maximum of 24 supported
Asi que necesitas cambiar el $rowWidth variable al tamaño que necesites.
1 para la respuesta № 2
Usando Foundation 4 simplemente he agregado
.row { max-width: 100%; }
a los estilos. Trabaja para rows tanto como top-bar
0 para la respuesta № 3
Si usa SASS y la versión 5 de la base, puede personalizar las filas con:
$row-width: 100%;