La clase de brechas de columna basada en punto de interrupción de Bulma se utiliza para definir una brecha de columna específica para cada punto de interrupción. Cada dispositivo tiene un tamaño de pantalla diferente según el cual se puede definir el espacio entre columnas.
Clases de brechas de columna basadas en puntos de interrupción:
- is-0-*: Esta clase elimina la brecha entre clases. Es similar a la clase sin espacios.
- is-1-*: Esta clase crea un espacio entre la columna de 0.25rem.
- is-2-*: Esta clase crea un espacio entre la columna de 0.5rem.
- is-3-*: esta clase crea un espacio entre la columna de 0,75 rem y este es el valor predeterminado.
- is-4-*: Esta clase crea un hueco entre la columna de 1rem.
- is-5-*: Esta clase crea un espacio entre la columna de 1.25rem.
- is-6-*: Esta clase crea un espacio entre la columna de 1.5rem.
- is-7-*: Esta clase crea un espacio entre la columna de 1.75rem.
- is-8-*: Esta clase crea un hueco entre la columna de 2rem.
Nota: Todos los espacios entre columnas se aplican a la variable, móvil, tableta, computadora de escritorio, pantalla panorámica y Full HD de este dispositivo.
Ejemplo: el siguiente código muestra los espacios entre columnas basados en puntos de interrupción.
HTML
<!DOCTYPE html> <html> <head> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body class="has-text-centered"> <h1 class="is-size-2 has-text-success"> GeeksforGeeks </h1> <b>Bulma Breakpoint based column gaps </b> <br> <section class="section"> <div class="container"> <div class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd"> <div class="column has-background-success"> First column </div> <div class="column has-background-primary"> Second column </div> <div class="column has-background-success"> Third column </div> <div class="column has-background-primary"> Fourth column </div> </div> </div> </section> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/columns/gap/#breakpoint-based-column-gaps
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA