Soy muy nuevo en esto, así que tengan paciencia conmigo.
He estado jugando con las vistas recientemente y me preguntaba si es posible anular los puntos de interrupción almacenados en el arranque.
es decir)
:root { --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; }específicamente, me gustaría anular la configuración --breakpoint-md. He notado que se han hecho preguntas similares, pero las respuestas no fueron claras. por lo que veo, estos se convierten en variables que se utilizan en instancias específicas. Me gustaría que la configuración se aplicara a todo el sitio. es posible?
Para explicar un poco. Cuando cambio el tamaño de la pantalla, mis columnas se apilan en 767 px, que es el aspecto que busco en 768 px, pero en 768 px las vistas se aplastan feamente. He estado leyendo un poco sobre scss, ¿es esa la única solución?
Puede personalizar cualquier cosa que desee con bootstrap.
Para comenzar, consulte la documentación sobre personalización aquí: https://getbootstrap.com/docs/5.0/customize/overview/
Su mejor apuesta sería usar sass, como se documenta aquí: https://getbootstrap.com/docs/5.0/customize/sass/
Algo como esto en su archivo custom.scss.
// Custom.scss // Option A: Include all of Bootstrap // Include any default variable overrides here (though functions won't be available) @import "../node_modules/bootstrap/scss/bootstrap"; // Then add additional custom code here :root { --breakpoint-md: 768px; }Si está usando bootstrap scss, use lo siguiente.
Primero tienes que instalar boostrap
npm install bootstrapY luego puede establecer puntos de interrupción personalizados.
@import '../node_modules/bootstrap/scss/functions'; @import '../node_modules/bootstrap/scss/variables'; $grid-columns: 12; $grid-gutter-width: 1.5rem; $grid-breakpoints: ( xs: 0, vs: 300px, sm: 500px, md: 750px, lg: 1000px, vl: 1300px, xl: 1600px ); $container-max-widths: ( xs: 299px, vs: 499px, sm: 749px, md: 999px, lg: 1299px, vl: 1599px, xl: 1999px ); @import '../node_modules/bootstrap/scss/bootstrap.scss';