Bulma - 列响应和嵌套

说明

Bulma 在不同类型的屏幕（如移动设备、平板电脑和台式机）中提供响应式列。您可以通过在 columns 容器中添加 is-mobile 修饰符来在移动设备上显示这些列，或者如果您只想在台式机上显示这些列，则在 columns 容器中添加 is-desktop 修饰符。

让我们创建一个简单的示例，用于移动设备列和台式机列，如下所示 −

实时演示

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Columns Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Mobile Columns
            </span>
            <br>
            <br>
            
            <div class = "columns is-mobile">
               <div class = "column">
                  <p class = "has-text-black has-background-info">First column</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info">Second column</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info">Third column</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info">Fourth column</p>
               </div>
            </div>
            <br>
            
            <span class = "title">
               Desktop Columns
            </span><br><br>
            
            <div class = "columns is-desktop">
               <div class = "column">
                  <p class = "has-text-black has-background-info">First column</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info">Second column</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info">Third column</p>
               </div>
               <div class = "column">
                  <p class = "has-text-black has-background-info">Fourth column</p>
               </div>
            </div>
            
         </div>
      </section>
   </body>
</html>

它显示的输出如下 −

嵌套列

Bulma 允许在另一个列中嵌套列以构建响应式列。

以下简单示例演示了列嵌套 −

实时演示

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Columns Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Nesting Columns
            </span>
            <br>
            <br>
            
            <div class = "columns">
               <div class = "column">
                  <p class = "has-background-info">First column</p>
                  <div class = "columns is-mobile">
                     <div class = "column is-size-6">
                        <p class = "has-background-primary">First nested column</p>
                     </div>
                     <div class = "column is-size-6">
                        <p class = "has-background-primary">Second nested column</p>
                     </div>
                  </div>
               </div>
               
               <div class = "column">
                  <p class = "has-background-info">Second column</p>
                  <div class = "columns is-mobile">
                     <div class = "column is-4">
                        <p class = "has-background-primary">is-4</p>
                     </div>
                     <div class = "column is-5">
                        <p class = "has-background-primary">is-5</p>
                     </div>
                     <div class = "column is-3">
                        <p class = "has-background-primary">is-3</p>
                     </div>
                  </div>
               </div>
               
            </div>
         </div>
      </section>
      
   </body>
</html>

它显示的输出如下 −

bulma_columns.htm

打印页面