Bulma - 列间隙和选项

说明

列在列内容之间创建相等的间隙，每列之间的默认值为 0.75rem。您可以在上一章列布局大小中查看列之间的默认间隙。

无间隙

Bulma 允许通过在容器中添加 is-gapless 修饰符来消除列之间的空间。

让我们看一个 columns 容器中 is-gapless 修饰符的简单示例 −

注意 − 调整编码地面输出窗口的大小，以查看根据窗口大小发生的变化。

<!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">
               Gapless
            </span>
            <br>
            <br>
            
            <div class = "columns is-gapless">
               <div class = "column">
                  <p class = "has-background-info">No Gap</p>
               </div>
               <div class = "column">
                  <p class = "has-background-primary">No Gap</p>
               </div>
               <div class = "column">
                  <p class = "has-background-warning">No Gap</p>
               </div>
               <div class = "column">
                  <p class = "has-background-info">No Gap</p>
               </div>
            </div>
            
         </div>
      </section>
   </body>
</html>

它显示以下输出 −

可变间隙

Bulma 允许通过在列容器上使用以下修饰符来定义列之间的自定义间隙。

• is-0 − 它消除了列之间的间隙。

• is-3 − 它指定间隙的默认值为 0.75rem。

• is-8 − 它指定间隙的默认值为 2rem。

让我们创建一个示例，通过在 columns 容器中使用上述修饰符 − 来定义列之间的可变间隙。

注意 − 调整编码地面输出窗口的大小，以查看根据窗口大小发生的变化。

<!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">
               Using is-0 variable Gap 
            </span>
            <br>
            <br>
            
            <div class = "columns is-variable is-0">
               <div class = "column is-4">
                  <div class = "has-background-info has-text-centered">
                     Side
                  </div>
               </div>
               <div class = "column is-8">
                  <div class = "has-background-primary has-text-centered">
                     Main
                  </div>
               </div>
            </div>
            
            <span class = "title">
               Using is-3 variable Gap 
            </span>
            <br>
            <br>
            
            <div class = "columns is-variable is-3">
               <div class = "column is-3">
                  <div class = "has-background-info has-text-centered">
                     Three columns
                  </div>
               </div>
               <div class = "column is-6">
                  <div class = "has-background-primary has-text-centered">
                     Three columns
                  </div>
               </div>
               <div class = "column is-3">
                  <div class = "has-background-info has-text-centered">
                     Three columns
                  </div>
               </div>
            </div>
            
            <span class = "title">
               Using is-8 variable Gap 
            </span>
            <br>
            <br>
            
            <div class = "columns is-variable is-8">
               <div class = "column">
                  <div class = "has-background-info has-text-centered">
                     1
                  </div>
               </div>
               <div class = "column">
                  <div class = "has-background-info has-text-centered">
                     2
                  </div>
               </div>
               <div class = "column">
                  <div class = "has-background-info has-text-centered">
                     3
                  </div>
               </div>
               <div class = "column">
                  <div class = "has-background-info has-text-centered">
                     4
                  </div>
               </div>
               <div class = "column">
                  <div class = "has-background-info has-text-centered">
                     5
                  </div>
               </div>
               <div class = "column">
                  <div class = "has-background-info has-text-centered">
                     6
                  </div>
               </div>
               <div class = "column">
                  <div class = "has-background-info has-text-centered">
                     7
                  </div>
               </div>
               <div class = "column">
                  <div class = "has-background-info has-text-centered">
                     8
                  </div>
               </div>
               <div class = "column">
                  <div class = "has-background-info has-text-centered">
                     9
                  </div>
               </div>
               <div class = "column">
                  <div class = "has-background-info has-text-centered">
                     10
                  </div>
               </div>
               <div class = "column">
                  <div class = "has-background-info has-text-centered">
                     11
                  </div>
               </div>
               <div class = "column">
                  <div class = "has-background-info has-text-centered">
                     12
                  </div>
               </div>
            </div>
         </div>
      </section>
      
   </body>
</html>

它显示以下输出 −

居中列

您可以在列容器上使用 .is-centered 修饰符使列居中。Bulma 还允许添加 .is-multiline 修饰符以使多列在一行中居中。

这个简单示例展示了在列容器中使用 .is-centered 和 .is-multiline 修饰符 −

<!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">
               Centering Column
            </span>
            <br>
            <br>
            
            <div class = "columns is-mobile is-centered">
               <div class = "column is-one-quarter">
                  <p class = "has-background-info">
                     is-one-quarter
                  </p>
               </div>
            </div>
            
            <span class = "title">
               Centering Columns with Multiline
            </span>
            <br>
            <br>
            
            <div class = "columns is-mobile is-multiline is-centered">
               <div class = "column is-narrow">
                  <p class = "has-background-info">
                     Column One
                  </p>
               </div>
               <div class = "column is-narrow">
                  <p class = "has-background-info">
                     Column Two
                  </p>
               </div>
               <div class = "column is-narrow">
                  <p class = "has-background-info">
                     Column Three
                  </p>
               </div>
               <div class = "column is-narrow">
                  <p class = "has-background-info">
                     Column Four
                  </p>
               </div>
            </div>
            
         </div>
      </section>
      
   </body>
</html>

上述代码显示以下输出 −

bulma_columns.html