En este artículo, veremos cómo anidar en Bulma. El anidamiento está permitido en el marco de Bulma, ya que brinda la flexibilidad de usar columnas dentro de otra columna para la capacidad de respuesta en la columna.
Clase de anidamiento de Bulma: el anidamiento en Bulma se puede hacer usando columnas y clases de columnas , no hay una llamada predefinida para eso.
Sintaxis:
<div class="columns">
<div class="column">
<div class="columns">
<div class="column">
....
El siguiente ejemplo ilustra el anidamiento de Bulma:
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <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="title"> GeeksforGeeks </h1> <div class="content"> <div class="columns"> <div class="column"> <p class="has-background-danger"> Column One</p> <div class="columns is-mobile"> <div class="column"> <p class="has-background-primary"> Nested column One </p> </div> <div class="column"> <p class="has-background-primary"> Nested column Two </p> </div> </div> </div> <div class="column"> <p class="has-background-danger"> Column Two </p> <div class="columns is-mobile"> <div class="column is-3"> <p class="has-background-info"> Size 3 </p> </div> <div class="column is-4"> <p class="has-background-info"> Size 4 </p> </div> <div class="column is-5"> <p class="has-background-info"> Size 5 </p> </div> </div> </div> </div> </div> </body> </html>
Producción:
La siguiente salida se crea después de cambiar la ventana gráfica a diferentes tamaños de dispositivo.
Referencia: https://bulma.io/documentation/columns/nesting/
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA