En este artículo aprenderemos sobre Bulma Offset . El modificador de desplazamiento del marco Bulma se usa para agregar espaciado horizontal con el uso de valores de clase personalizados como .is-offset-8 o . es-desplazamiento-un-cuarto . Es posible crear el espaciado horizontal alrededor de las columnas usando columnas vacías, sin embargo, usar las clases de desplazamiento es una alternativa más fácil.
Clases de compensación de Bulma:
- is-offset-one-four: esta clase se usa para agregar espaciado horizontal para las columnas donde el espaciado es un cuarto del ancho total de la pantalla. Esto también se puede usar como un cuarto, un quinto, un tercio, etc.
- is-offset-x: esta clase se usa para agregar espaciado horizontal para las columnas donde x se puede usar como cualquier número entre 1 y 12. Por ejemplo, .is-offset-8 o .is-offset-4 , etc. ser usado.
Sintaxis:
<div class="columns is-mobile">
<div class="column is-half is-offset-one-quarter">Column 1</div>
</div>
...
<div class="columns is-mobile">
<div class="column is-4 is-offset-8">Column 2</div>
</div>
Ejemplo: Este ejemplo ilustra el desplazamiento de la columna Bulma.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" /> </head> <body> <div class="container content has-text-centered"> <h1 class="title has-text-success"> GeeksforGeeks </h1> <h2 class="subtitle"> Bulma Column Offset </h2> <!-- Offset starts here --> <div class="columns is-mobile"> <div class="column is-half is-offset-one-fifth has-background-primary title my-4 p-4"> This is column 1 with offset one fifth </div> </div> <div class="columns is-mobile"> <div class="column is-three-fifths is-offset-one-fourth has-background-primary title my-4 p-4"> This is column 2 with offset one fourth </div> </div> <div class="columns is-mobile"> <div class="column is-4 is-offset-6 has-background-primary title my-4 p-4"> This is column 3 with offset 6 </div> </div> <div class="columns is-mobile"> <div class="column is-11 is-offset-3 has-background-primary title my-4 p-4"> This is column 4 with offset 3 </div> </div> </div> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/columns/sizes/#offset
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA