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

列印頁面