css - filas - sistema de rejillas bootstrap 4
Cómo cambiar la cuadrícula de fluido de Bootstrap predeterminada 12 Ancho de canal de columna (3)
Estoy buscando saber si hay alguna solución simple conocida para cambiar la canaleta con el sistema de arranque de red predeterminado de fluido 12 (2.3.0).
No estoy familiarizado con LESS pero si esa es la respuesta, por favor también describa cómo se podría cambiar. Lo mismo con Sass.
Tenga en cuenta que es perfectamente aceptable cambiar el ancho del canal, por la mitad o un cuarto , por ejemplo, si eso puede hacer las cosas más simples.
Los siguientes objetivos deben cumplirse:
- Debe poder actualizar bootstrap en el futuro. Esto significa no editar los archivos de arranque reales.
- La funcionalidad debe permanecer para todos los demás objetos.
- Debe ser simple. Menos de 10 líneas de CSS. Por ejemplo, una clase agregada o algo así.
He buscado a través de Stack Overflow y todavía no tengo idea de cómo puedo hacer algo como esto. Según mi entender, la descarga de un Bootstrap personalizado solo genera anchos de canal personalizados para redes no fluidas . He codificado mi propio sistema de grilla fluida antes, así que entiendo las matemáticas, pero me preocupa que pueda haber consecuencias y sería útil si se pudieran compartir problemas conocidos sobre anulaciones de clase.
Prometo dar crédito donde es debido.
ACTUALIZAR:
Cambiar las menos variables como se describe en la respuesta de Yoda es el camino a seguir. ¿Alguien tiene alguna experiencia cambiando estas menos variables? Por ejemplo, creo que las variables que deben modificarse son las siguientes:
// Fluid grid
// -------------------------
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);
// 1200px min
@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200);
@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200);
// 768px-979px
@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768);
@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768);
¿Cómo se puede cambiar algo como esto? Quizás:
@fluidGridGutterWidth768: percentage(1.5);
Si alguien ha hecho esto antes, agradecería un empujón en la dirección correcta.
Estaba buscando una solución simple para este problema, también. Mi objetivo era usar CSS simple, no MENOS. Esta respuesta es como cualquier otra que encontré, basada en compilar LESS o usar el compilador en línea de bootstrap. Así que traté de encontrar mi propia solución.
Al leer la documentación, encontrará lo siguiente acerca del ancho del canal: las columnas crean canales (espacios entre el contenido de la columna) a través del relleno. Ese relleno se compensa en filas para la primera y la última columna a través del margen negativo en .rows.
En base a esto probé lo siguiente:
.container {padding-left:1px;padding-right:1px;}
.row {margin-left:-1px;margin-right:-1px;}
.row > div {padding-left:1px;padding-right:1px;}
A partir de ahora, el ancho del canal fue de solo 2 píxeles. Mi siguiente problema fue que mi ancho previsto era un número impar. Mi solución fue eliminar los rellenos y los márgenes de la izquierda y ponerlos completamente a la derecha:
.container {padding-left:0;padding-right:5px;}
.row {margin-left:0;margin-right:-5px;}
.row > div {padding-left:0;padding-right:5px;}
Ahora tengo un ancho de canal de 5 píxeles.
No probé esto en todos los escenarios posibles, puedes usar bootstrap. Especialmente debes prestar atención para usar solo div dentro de la columna div dentro de un div contenedor. Pero en mi caso, fue una solución muy efectiva sin tocar el código fuente de origen de bootstrap o el uso de un compilador LESS.
Creo que podrías estar pensando en eso. El problema con el cambio de las variables LESS es que lo cambiará para todos los canales. Entonces, si me gusta el canal de 15 píxeles para organizar todo el diseño pero quiero que el canal sea de 5 píxeles para un formulario dentro de esa cuadrícula, no funcionará.
Solo crea 2 clases de CSS para anular las áreas en las que deseas cambiar el canal.
Aplicar esto en el nivel de "fila".
.row-5-gutter{
margin-left: -5px;
margin-right: -5px;
}
Aplicar esto en el nivel de "columna".
.col-5-gutter{
padding-left: 5px;
padding-right: 5px;
}
La forma más fácil es, probablemente, utilizar la descarga personalizable que proporciona Twitter Bootstrap. Cambie la variable @fluidGridGutterWidth para que se adapte a sus necesidades en el formulario. Descargue menos archivos desde aquí . Puede acceder al archivo variable.less desde el proyecto Github bootstrap y luego cambiar este fragmento de código:
// Fluid grid
// -------------------------
@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth); // <= this one
Al principio pensé que tenías acceso a menos archivos, luego me di cuenta de que estás usando la interfaz gráfica de usuario personalizada en el sitio web. Simplemente descargue menos archivos y realice los cambios. Luego compila menos archivos para darte un archivo css o usa menos para el desarrollo. Puede usar css o min.css para la implementación.