Bootstrap - 間距

上一頁
下一頁

本章討論 Bootstrap 提供的用於間距的實用工具類。

Bootstrap 提供預定義的一系列響應式邊距、填充和間隙實用工具類，可用於修改元素的外觀。這些實用工具類適用於所有型別的斷點，例如：

斷點 尺寸
xs <=576px
sm >=576px
md >=768px
lg >=992px
xl >=1200px
xxl >=1400px

這些類的命名格式如下：

斷點 命名格式
xs {property}{sides}-{size}
sm, md, lg, xl, xxl {property}{sides}-{breakpoint}-{size}

其中property可以是以下之一：

屬性 值
m margin（邊距）
p padding（填充）

其中sides可以是以下之一：

方向 值
t margin-top/padding-top（上邊距/上填充）
b margin-bottom/padding-bottom（下邊距/下填充）
s margin-left/padding-left（左邊距/左填充）
e margin-right/padding-right（右邊距/右填充）
x margin-left 和 margin-right 或 padding-left 和 padding-right（左右邊距/左右填充）
y margin-top 和 margin-bottom 或 padding-top 和 padding-bottom（上下邊距/上下填充）
空 四面邊距和填充

其中size可以是以下之一：

尺寸 值
0 margin/padding - 0
1 margin/padding - 0.25rem
2 margin/padding - 0.5rem
3 margin/padding - 1rem
4 margin/padding - 1.5rem
5 margin/padding - 3rem
auto margin - auto（自動）
注意：可以透過向$spacers Sass 對映變數新增條目來新增更多尺寸。

讓我們來看一個邊距實用工具的示例

示例

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

<!DOCTYPE html>
<html>
   <head>
       <title>Bootstrap - Spacing</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 mt-3">
        <h4 class="display-4">Spacing margin utilities</h4>
        <p><u>Set the spacing (margin) of an element with the {property}{sides}-{breakpoint}-{size} classes.</u></p>
        <div class="mt-4 bg-info">Only top margin (1.5rem)</div>
        <div class="mb-5 bg-light">Only bottom margin (1rem)</div>
        <div class="ms-5 bg-warning">Only left margin (3rem)</div>
        <div class="me-5 bg-warning">Only right margin (3rem)</div>
        <div class="mx-5 text-bg-secondary">Both left and right margins (3rem)</div>
        <div class="my-5 bg-primary">Both top and bottom margins (3rem)</div>
      </div>
   </body>
</html>

讓我們來看一個填充實用工具的示例

示例

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

<!DOCTYPE html>
<html>
   <head>
       <title>Bootstrap - Spacing</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 mt-3">
        <h4 class="display-4">Spacing padding utilities</h4>
        <p><u>Set the spacing (padding) of an element with the {property){sides}-{breakpoint}-{size} classes.</u></p>
        <div class="pt-4 bg-info">Only top padding (1.5rem)</div>
        <div class="pb-5 text-bg-success">Only bottom padding (1rem)</div>
        <div class="ps-5 bg-warning">Only left padding (3rem)</div>
        <div class="pe-5 text-bg-danger">Only right padding (3rem)</div>
        <div class="px-5 text-bg-secondary">Both left and right padding (3rem)</div>
        <div class="py-5 text-bg-primary">Both top and bottom padding (3rem)</div>
      </div>
   </body>
</html>

水平居中

對於水平居中的固定寬度塊級內容，Bootstrap 提供.mx-auto 類。

讓我們來看一個示例

示例

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

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap - Spacing</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 mt-3">
        <h4 class="display-5">Horizontal centering</h4><br>
        <div class="mx-auto p-2 text-bg-success" style="width: 200px;">
          Horizontally centered
        </div>
      </div>
   </body>
</html>

  • 預設情況下，負值可以與 CSS 中的margin屬性一起使用。

  • 負值不能與padding一起使用。

  • 可以透過將變數$enable-negative-margins設定為true來啟用負邊距。

間隙實用工具

在使用display: grid或display: flex時，您可以在父元素上使用gap實用工具。預設情況下，gap實用工具是響應式的。

它可以儲存來自$spacers對映(0-5)的所有六個尺寸的值。沒有.gap-auto類，因為它與.gap-0相同。

讓我們來看一個示例

示例

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

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Spacing</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 mt-3">
      <h4 class="display-6">
          gap utility
      </h4>
      <h4>gap utility class <i>.gap-*</i></h4>
      <div class="d-grid gap-0 p-3 border border-primary bg-light">
          <div class="p-2 bg-light border">
              gap-0
          </div>
          <div class="p-2 bg-light border">
              gap-0
          </div>
      </div>
      <div class="d-grid gap-1 p-3 border border-danger bg-primary-subtle">
          <div class="p-2 bg-light border">
            gap-1
          </div>
          <div class="p-2 bg-light border">
            gap-1
          </div>
      </div>
      <div class="d-grid gap-2 p-3 border border-success bg-danger-subtle">
          <div class="p-2 bg-light border">
            gap-2
          </div>
          <div class="p-2 bg-light border">
            gap-2
          </div>
      </div> 
    </div>
  </body>
</html>

行間隙

為了在指定容器中子項之間設定垂直空間，請使用實用工具類.row-gap。

讓我們來看一個示例

示例

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

<!DOCTYPE html>
<html>
   <head>
     <title>Bootstrap - Spacing</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 mt-3">
        <h4 class="display-6">
         gap utility
        </h4>
        <h4>row gap utility class <i>.row-gap-*</i></h4>
        <div class="d-grid gap-0 row-gap-4">
          <div class="p-2 border bg-primary">
            row gap-4
          </div>
          <div class="p-2 border bg-info">
            row gap-4
          </div>
          <div class="p-2 border bg-warning">
            row gap-4
          </div>
          <div class="p-2 border bg-danger-subtle">
            row gap-4
          </div>
        </div>
      </div> 
     </div>
   </body>
</html>

列間隙

為了在指定容器中子項之間設定水平空間，請使用實用工具類.column-gap。

讓我們來看一個示例

示例

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

<!DOCTYPE html>
<html>
   <head>
     <title>Bootstrap - Spacing</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 mt-3">
      <h4 class="display-4">
        gap utility
      </h4>
      <h4>column gap utility class <i>.column-gap-*</i></h4>
      <div class="d-flex gap-0 column-gap-4">
        <div class="p-2 g-col-6 border border-primary">Grid item 1</div>
        <div class="p-2 g-col-6 border border-primary">Grid item 2</div>
        <div class="p-2 g-col-6 border border-primary">Grid item 3</div>
        <div class="p-2 g-col-6 border border-primary">Grid item 4</div>
      </div>
      <div class="d-flex gap-0 column-gap-2">
        <div class="p-2 g-col-6 border border-success">Grid item 1</div>
        <div class="p-2 g-col-6 border border-success">Grid item 2</div>
        <div class="p-2 g-col-6 border border-success">Grid item 3</div>
        <div class="p-2 g-col-6 border border-success">Grid item 4</div>
      </div>
     </div>
   </body>
</html>
列印頁面
上一頁
下一頁
廣告