Bootstrap - 列布局

上一頁
下一頁

本章將討論 Bootstrap 列布局。彈性盒網格系統允許您使用各種對齊、排序和偏移選項來修改列。使用列類，您可以控制非網格專案的寬度。

在學習如何更改和自定義網格列之前，請務必先閱讀網格頁面。

工作原理

  • 列基於網格的彈性盒架構構建。彈性盒允許在行級別更改特定列和列組。

  • 在建立網格佈局時，所有內容都放置在列中。Bootstrap 網格的層次結構從容器到行到列到您的內容。當您組合內容和列時，可能會出現不可預見的後果。

  • 為了生成響應式佈局，Bootstrap 提供了預定義的類。每個網格層都有六個斷點和十二列。Bootstrap 提供了許多類來建立您想要的佈局。

對齊方式

使用彈性盒對齊實用工具垂直和水平對齊列。

垂直對齊

使用垂直對齊實用工具垂直更改元素的對齊方式。

  • 使用align-items-start類將內容垂直對齊到起始位置。

  • 使用align-items-center類將內容垂直居中對齊。

  • 使用align-items-end類將內容垂直對齊到末尾。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Columns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container text-center">
      <h5>Align the content at start</h5>
      <div class="row align-items-start bg-info mt-4" style="min-height: 80px;">
        <div class="col bg-warning">
          Tutorialspoint
        </div>
      </div>
      <h5 class="mt-2">Align the content at center</h5>
      <div class="row align-items-center bg-info mt-4" style="min-height: 80px;">
        <div class="col bg-warning">
          Tutorialspoint
        </div>
      </div>
      <h5 class="mt-2">Align the content at end</h5>
      <div class="row align-items-end bg-info mt-4" style="min-height: 80px;">
        <div class="col bg-warning">
          Tutorialspoint
        </div>
      </div>
    </div>
  </body>
  </html>

使用.align-self-*類分別調整每列的對齊方式。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Columns</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container text-center mt-4">
        <div class="row  bg-warning" style="min-height: 80px;">
          <div class="col align-self-start bg-info">
            First Column
          </div>
          <div class="col align-self-center bg-info">
            Second Column
          </div>
          <div class="col align-self-end bg-info">
            Third Column
          </div>
        </div>
      </div>
    </body>
    </html>

水平對齊

可以使用justify-content-*類更改水平對齊方式，以水平對齊列。

  • 使用justify-content-start將列從起始位置對齊。

  • 使用justify-content-center將列居中對齊。

  • 使用justify-content-end將列對齊到末尾。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Columns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
  </head>
  <body>
    <div class="container text-center mt-4">
      <h5>Align the columns at start</h5>
      <div class="row justify-content-start bg-info mt-4" style="min-height: 40px;">
        <div class="col-4 bg-warning">
          First Column
        </div>
        <div class="col-4 bg-light">
          Second Column
        </div>
      </div>
      <h5 class="mt-4">Align the columns at center</h5>
      <div class="row justify-content-center bg-info mt-4" style="min-height: 40px;">
        <div class="col-4  bg-warning">
         First Column
        </div>
        <div class="col-4 bg-light">
          Second Column
        </div>
      </div>
      <h5 class="mt-4">Align the columns at end</h5>
      <div class="row justify-content-end bg-info mt-4" style="min-height: 40px;">
        <div class="col-4  bg-warning">
          First Column
        </div>
        <div class="col-4 bg-light">
          Second column
        </div>
      </div>
    </div>
  </body>
  </html>

  • 使用justify-content-around使兩列周圍的間距相等。

  • 使用justify-content-between在兩列之間新增空格。

  • 使用justify-content-evenly類在兩列的左右列之間新增相等的空間。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Columns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container text-center mt-4">
      <h5 class="mt-4">Add space between the two columns using justify-content-around</h5>
      <div class="row justify-content-around bg-info mt-4" style="min-height: 40px;">
        <div class="col-4 bg-warning">
          First Column
        </div>
        <div class="col-4 bg-light">
          Second Column
        </div>
      </div>
      <h5 class="mt-4">Add space between the two columns using justify-content-between.</h5>
      <div class="row justify-content-between bg-info mt-4" style="min-height: 40px;">
        <div class="col-4 bg-warning">
          First Column
        </div>
        <div class="col-4 bg-light">
          Second Column
        </div>
      </div>
      <h5 class="mt-4">Add equal space between columns using justify-content-evenly.</h5>
      <div class="row justify-content-evenly bg-info mt-4" style="min-height: 40px;">
        <div class="col-4 bg-warning">
          First Column
        </div>
        <div class="col-4 bg-light">
          Second Column
        </div>
      </div>
    </div>
  </body>
  </html>

列換行

如果一行中超過12列，它們將自動作為單個單元換行到下一行。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Columns</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container">
        <div class="row mt-2">
          <div class="col-2 bg-warning">If there are more than 12 columns in a row, they will automatically wrap to the next line as a single unit.</div>
          <div class="col-6 bg-info">If there are more than 12 columns in a row, they will automatically wrap to the next line as a single unit.</div>
          <div class="col-9 bg-primary">If there are more than 12 columns in a row, they will automatically wrap to the next line as a single unit.</div>
        </div>
      </div>
    </body>
    </html>

列換行

要在彈性盒中將列換行到新行，請在要換行的列之後新增一個寬度為100％的div元素。這通常發生在多個.rows中，儘管並非所有實現方法都適合此方法。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Columns</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container text-center">
        <div class="row mt-2">
          <div class="col-6 col-sm-3 bg-info">First Column</div>
          <div class="col-6 col-sm-3 bg-warning">Second Column</div>
      
          <div class="w-100"></div>
    
          <div class="col-6 col-sm-3 bg-primary">Third Column</div>
          <div class="col-6 col-sm-3 bg-secondary">Fourth Column</div>
        </div>
      </div>
    </body>
    </html>

您還可以使用響應式顯示實用工具在特定斷點處應用此換行。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Columns</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container text-center mt-2">
        <div class="row">
          <div class="col-6 col-sm-4  bg-info">First Column</div>
          <div class="col-6 col-sm-4  bg-warning">Second Column</div>
      
          <div class="w-100 d-none d-md-block"></div>
      
          <div class="col-6 col-sm-4 bg-primary">Third Column</div>
          <div class="col-6 col-sm-4 bg-light">Fourth Column</div>
        </div>
      </div>
    </body>
    </html>

重新排序

Bootstrap 的列順序類根據各種螢幕尺寸調整網格系統的順序。

順序類

使用.order-類控制內容的視覺順序。因為這些類是響應式的，所以您可以按斷點對它們進行排序（例如，.order-2 order-md-3）。所有網格層都包含對值 1 到 5 的支援。可以透過 Sass 變數修改.order-*類的預設數量。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Columns</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container text-center">
        <div class="row">
          <div class="col bg-info">
            no order applied.
          </div>
          <div class="col order-5 bg-warning">
            with an order of 5.
          </div>
          <div class="col order-1 bg-primary">
            with an order of 1.
          </div>
        </div>
      </div>
    </body>
    </html>

此外，響應式類.order-first和.order-last可分別使用order: -1和order: 6來重新排序元素。您可以根據需要將這些類與編號的.order-*類組合。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Columns</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container text-center mt-2">
        <div class="row">
          <div class="col order-last bg-info">
            First column as ordered last
          </div>
          <div class="col order-first bg-primary">
            Second column as ordered first
          </div>
          <div class="col bg-warning">
            Third column (unordered)
          </div>
        </div>
      </div>
    </body>
    </html>

列偏移

網格列偏移可以透過兩種方式實現

網格類的大小與列匹配，而邊距更適合具有可變偏移寬度的快速佈局。

偏移類

使用.offset-md-*類將列從其原始位置向右移動。這些類向列的左外邊距新增*列。類.offset-md-4將.col-md-4向右移動四列。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Columns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container text-center">
      <div class="row mt-2">
        <div class="col-md-2 bg-info p-2">First Column</div>
      </div>
      <div class="row mt-2">
        <div class="col-md-2 offset-md-3 bg-warning p-2">Second Column</div>
      </div>
      <div class="row mt-2">
        <div class="col-md-2 offset-md-2 bg-info p-2">Third Column</div>
      </div>
      <div class="row mt-2">
        <div class="col-md-2 offset-md-4 bg-warning p-2">Fourth Column</div>
      </div>
    </div>
  </body>
  </html>

在響應式斷點處清除列

您需要在響應式斷點處重置偏移量以清除列。檢視網格示例以瞭解演示。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Columns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container text-center">
      <div class="row mt-2">
        <div class="col-sm-5 col-md-6 bg-warning">First Row First Column</div>
        <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0 bg-info">First Row Second Column</div>
      </div>
      <div class="row mt-2">
        <div class="col-sm-6 col-md-5 col-lg-6 bg-warning">Second Row First Column</div>
        <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0  bg-info">Second Row Second Column</div>
      </div>
    </div>
  </body>
  </html>

邊距實用工具

在版本 4 中，彈性盒允許您使用邊距實用工具（例如.me-auto）將兄弟列彼此分開。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Columns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container text-center">
      <div class="row mt-2">
        <div class="col-md-4 bg-info"> First Row First Column</div>
        <div class="col-md-4 ms-auto bg-warning">First Row Second Column</div>
      </div>
      <div class="row mt-2">
        <div class="col-md-3 ms-md-auto bg-info">Second Row First Column</div>
        <div class="col-md-3 ms-md-auto bg-warning">Second Row Second Column</div>
      </div>
      <div class="row mt-2">
        <div class="col-auto me-auto bg-info">Third Row First Column</div>
        <div class="col-auto bg-warning">Third Row Second Column</div>
      </div>
    </div>
  </body>
  </html>

獨立列類

要為元素提供特定寬度，請在.row之外使用.col-*類。當列類用作行的非直接子項時，會省略填充。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Columns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="col-3 p-2 mb-2 bg-info">
     First Column
    </div>
    <div class="col-sm-6 p-2 bg-warning">
      Second Column
    </div>
  </body>
  </html>

要建立響應式浮動影像，請將類與實用工具組合。如果文字較短，請將其包裝在.clearfix包裝器中以清除浮動。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Columns</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="clearfix">
      <img src="\bootstrap\images\tut.png" class="col-sm-2 float-sm-end mb-2 ms-sm-2" alt="...">
      <p> Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float. Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float.</p>
      <p> Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float. Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float. create responsive floated images, combine the classes with utilities.</p>
      <p> Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float. Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float.</p>
      <p> Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float. Create responsive floated images, combine the classes with utilities. If the text is shorter, wrap it in a .clearfix wrapper to clear the float.</p>
    </div>
  </body>
  </html>
列印頁面
上一頁
下一頁
廣告