Bulma - 列间距和选项

描述

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

无间距

通过在容器中添加 is-gapless 修饰符，Bulma 可以消除列之间的间距。

让我们看一个 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>

它显示以下输出 −

居中列

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

以下简单示例展示了在 columns 容器中使用 .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.htm

打印页面