Bootstrap 4 - Flex 佈局

上一頁
下一頁

描述

Flex 實用工具可用於管理頁面的佈局、對齊方式、網格列、導航和其他元件。它使設計佈局結構變得更容易，無需使用浮動或定位。

Flex 行為和方向

使用 flexbox 顯示實用工具，如 d-flex 和 d-inline-flex，將 flexbox 容器和子元素顯示為 flex 專案。您可以使用 .flex-row（使用 .flex-row-reverse 從相反方向顯示水平方向）和 .flex-column（使用 .flex-column-reverse 從相反方向顯示垂直方向）類分別設定 flex 專案在水平方向和垂直方向上的方向，如下例所示：

示例

線上演示 
<html>
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Flex Behaviors</h2>
         <div class = "d-flex p-2 bg-info">
            This is flex container, uses the 'd-flex' class
         </div>
         <br>
         
         <div class = "d-inline-flex p-2 bg-info">
            This is inline flexbox container, uses the 'd-inline-flex' class
         </div>
         <br>
         <br>

         <h2>Direction</h2>
         <h4>Horizontal Direction</h4>
         <div class = "d-flex flex-row bg-info mb-3">
            <div class = "p-2 border border-dark ">flex-row: Item 1</div>
            <div class = "p-2 border border-dark">flex-row: Item 2</div>
            <div class = "p-2 border border-dark">flex-row: Item 3</div>
         </div>
         <div class = "d-flex flex-row-reverse bg-info">
            <div class = "p-2 border border-dark">flex-row-reverse: Item 1</div>
            <div class = "p-2 border border-dark">flex-row-reverse: Item 2</div>
            <div class = "p-2 border border-dark">flex-row-reverse: Item 3</div>
         </div>
         <br>

         <h4>Vertical Direction</h4>
         <div class = "d-flex flex-column bg-info mb-3">
            <div class = "p-2 border border-dark">flex-column: Item 1</div>
            <div class = "p-2 border border-dark">flex-column: Item 2</div>
            <div class = "p-2 border border-dark">flex-column: Item 3</div>
         </div>
         <div class = "d-flex flex-column-reverse bg-info">
            <div class = "p-2 border border-dark">flex-column-reverse: Item 1</div>
            <div class = "p-2 border border-dark">flex-column-reverse: Item 2</div>
            <div class = "p-2 border border-dark">flex-column-reverse: Item 3</div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

將產生以下結果：

輸出

Justify Content (內容對齊)

可以使用 justify-content 實用工具更改 flex 專案（例如 start、end、center、between 和 around）在 flexbox 容器的主軸（x 軸開始）上的對齊方式。

以下示例演示了這一點：

示例

線上演示 
<html>
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Alignment - Start</h2>
         <div class = "d-flex justify-content-start bg-info">
            <div class = "p-2 border border-dark">Item 1</div>
            <div class = "p-2 border border-dark">Item 2</div>
            <div class = "p-2 border border-dark">Item 3</div>
         </div>
         <br>
            
         <h2>Alignment - End</h2>
         <div class = "d-flex justify-content-end bg-info">
            <div class = "p-2 border border-dark">Item 1</div>
            <div class = "p-2 border border-dark">Item 2</div>
            <div class = "p-2 border border-dark">Item 3</div>
         </div>
         <br>
         
         <h2>Alignment - Center</h2>
         <div class = "d-flex justify-content-center bg-info">
            <div class = "p-2 border border-dark">Item 1</div>
            <div class = "p-2 border border-dark">Item 2</div>
            <div class = "p-2 border border-dark">Item 3</div>
         </div>
         <br>
         
         <h2>Alignment - Between</h2>
         <div class = "d-flex justify-content-between bg-info">
            <div class = "p-2 border border-dark">Item 1</div>
            <div class = "p-2 border border-dark">Item 2</div>
            <div class = "p-2 border border-dark">Item 3</div>
         </div>
         <br>
         
         <h2>Alignment - Around</h2>
         <div class = "d-flex justify-content-around bg-info">
            <div class = "p-2 border border-dark">Item 1</div>
            <div class = "p-2 border border-dark">Item 2</div>
            <div class = "p-2 border border-dark">Item 3</div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

將產生以下結果：

輸出

Align Items (專案對齊)

可以使用 align-items 實用工具更改 flex 專案（例如 start、end、center、baseline 和 stretch）在 flexbox 容器的交叉軸（y 軸開始）上的對齊方式。

以下示例演示了這一點：

示例

線上演示 
<html>
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Align Items - Start</h2>
         <div class = "d-flex align-items-start bg-info" style = "height: 100px">
            <div class = "p-2 border border-dark">Item 1</div>
            <div class = "p-2 border border-dark">Item 2</div>
            <div class = "p-2 border border-dark">Item 3</div>
         </div>
         <br>
         
         <h2>Align Items - End</h2>
         <div class = "d-flex align-items-end bg-info" style = "height: 100px">
            <div class = "p-2 border border-dark">Item 1</div>
            <div class = "p-2 border border-dark">Item 2</div>
            <div class = "p-2 border border-dark">Item 3</div>
         </div>
         <br>
         
         <h2>Align Items - Center</h2>
         <div class = "d-flex align-items-center bg-info" style = "height: 100px">
            <div class = "p-2 border border-dark">Item 1</div>
            <div class = "p-2 border border-dark">Item 2</div>
            <div class = "p-2 border border-dark">Item 3</div>
         </div>
         <br>
         
         <h2>Align Items - Baseline</h2>
         <div class = "d-flex align-items-baseline bg-info" style = "height: 100px">
            <div class = "p-2 border border-dark">Item 1</div>
            <div class = "p-2 border border-dark">Item 2</div>
            <div class = "p-2 border border-dark">Item 3</div>
         </div>
         <br>
         
         <h2>Align Items - Stretch</h2>
         <div class = "d-flex align-items-stretch bg-info" style = "height: 100px">
            <div class = "p-2 border border-dark">Item 1</div>
            <div class = "p-2 border border-dark">Item 2</div>
            <div class = "p-2 border border-dark">Item 3</div>
         </div>
         <br>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

將產生以下結果：

輸出

填充、增長和收縮

可以使用 .flex-fill 類將元素以相等寬度顯示在水平空間中。如果可用空間，則 flex 專案將使用 .flex-grow-* 類增長；如果需要，則 flex 專案將使用 .flex-shrink-* 類收縮。

以下示例演示了上述實用工具的使用：

示例

線上演示 
<html>
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Fill</h2>
         <div class = "d-flex bg-info">
            <div class = "p-2 flex-fill border border-dark">Item 1</div>
            <div class = "p-2 flex-fill border border-dark">Item 2</div>
            <div class = "p-2 flex-fill border border-dark">Item 3</div>
         </div>
         <br>
         
         <h2>Grow</h2>
         <div class = "d-flex bg-info">
            <div class = "p-2 flex-grow-1 bg-info">Item 1 (Using class flex-grow-1)</div>
            <div class = "p-2 bg-warning">Item 2</div>
            <div class = "p-2 bg-secondary">Item 3</div>
         </div>
         <br>
         
         <h2>Shrink</h2>
         <div class = "d-flex bg-info">
            <div class = "p-2 w-100 bg-info">Item 1</div>
            <div class = "p-2 flex-shrink-1 bg-warning">Item 2 (Using class flex-shrink-1)</div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

將產生以下結果：

輸出

自動邊距和 align-items

Flex 實用工具透過使用 .mr-auto（將專案推到右側）和 .ml-auto（將專案推到左側）類為 flex 專案提供自動邊距功能。可以使用容器上的 mt-auto 或 mb-auto 類將 flex 專案移動到頂部或底部。

以下示例演示了上述類的使用：

示例

線上演示 
<html>
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Auto Margins</h2>
         <div class = "d-flex bg-info mb-3">
            <div class = "p-2 bg-warning">Item 1</div>
            <div class = "p-2 bg-primary">Item 2</div>
            <div class = "p-2 bg-secondary">Item 3</div>
         </div>
         <div class = "d-flex bg-info mb-3">
            <div class = "mr-auto p-2 bg-warning">mr-auto: Item 1</div>
            <div class = "p-2 bg-primary">Item 2</div>
            <div class = "p-2 bg-secondary">Item 3</div>
         </div>
         <div class = "d-flex bg-info mb-3">
            <div class = "p-2 bg-secondary">Item 1</div>
            <div class = "p-2 bg-primary">Item 2</div>
            <div class = "ml-auto p-2 bg-warning">ml-auto: Item 3</div>
         </div>
         
         <h2>With align-items</h2>
         <div class = "d-flex align-items-start flex-column bg-info mb-3" 
            style = "height: 200px;">
            
            <div class = "mb-auto p-2 bg-warning">mb-auto: Item 1</div>
            <div class = "p-2 bg-primary">Item 2</div>
            <div class = "p-2 bg-secondary">Item 3</div>
         </div>
         <div class = "d-flex align-items-end flex-column bg-info mb-3" 
            style = "height: 200px;">
            <div class = "p-2 bg-secondary">Item 1</div>
            <div class = "p-2 bg-primary">Item 2</div>
            <div class = "mt-auto p-2 bg-warning">mt-auto: Item 3</div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

將產生以下結果：

輸出

Order (順序)

Flex 使用 order 實用工具更改容器中 flex 專案的順序，如下例所示：

示例

線上演示 
<html>
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>Flex Items Order</h2>
         <div class = "d-flex flex-nowrap bg-info">
            <div class = "order-3 p-2 bg-secondary">'order-3': Item 1</div>
            <div class = "order-1 p-2 bg-primary">'order-1': Item 2</div>
            <div class = "order-2 p-2 bg-warning">'order-2': Item 3</div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

將產生以下結果：

輸出

Align Content (內容對齊)

您可以使用 align-content 實用工具在容器的交叉軸上對齊（例如 start、end、center、between 和 around）flex 專案。

以下示例演示了這一點：

示例

線上演示 
<html>
   <head>
      <!-- Meta tags -->
      <meta charset="utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
         href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "container">
         <h2>align-content-start</h2>
         <div class = "d-flex bg-info align-content-start flex-wrap" style = "height: 150px">
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
         </div>
         <br>
         
         <h2>align-content-end</h2>
         <div class = "d-flex bg-info align-content-end flex-wrap" style = "height: 150px">
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
         </div>
         <br>
         
         <h2>align-content-center</h2>
         <div class = "d-flex bg-info align-content-center flex-wrap" style = "height: 150px">
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
         </div>
         <br>
         
         <h2>align-content-between</h2>
         <div class = "d-flex bg-info align-content-between flex-wrap" style = "height: 150px">
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
         </div>
         <br>
         
         <h2>align-content-around</h2>
         <div class = "d-flex bg-info align-content-around flex-wrap" style = "height: 150px">
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
            <div class = "p-2 border border-dark">Demo Item</div>
         </div>
         <br>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
         integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Popper -->
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
         integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
         crossorigin = "anonymous">
      </script>
      
      <!-- Latest compiled and minified Bootstrap JavaScript -->
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
         integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

將產生以下結果：

輸出

bootstrap4_utilities.htm
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.