Bootstrap - 尺寸

本章討論 Bootstrap 尺寸。尺寸允許您透過實用工具類調整元素的高度和寬度。

相對於父元素

寬度和高度實用工具是使用在 _utilities.scss 中找到的實用工具 API 建立的。它們預設支援 25%、50%、75%、100% 和 auto 等值。您可以自定義這些值以生成不同的實用工具。

相對於寬度

w-25、w-50、w-75、w-100 和 w-auto 類定義每個 div 元素的寬度。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Sizing</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="w-25 p-3 text-bg-primary">25% width</div>
        <div class="w-50 p-3 text-bg-secondary">50% width</div>
        <div class="w-75 p-3 text-bg-warning">75% width</div>
        <div class="w-100 p-3 text-bg-info">Full width (100%)</div>
        <div class="w-auto p-3 text-bg-danger">Auto width</div>
    </body>
    </html>

相對於高度

h-25、h-50、h-75、h-100 和 h-auto 類負責設定每個 div 元素的高度。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Sizing</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="text-bg-light" style="height: 100px;">
        <div class="h-25 d-inline-block text-bg-primary text-center" style="width: 150px;">25% Height</div>
        <div class="h-50 d-inline-block text-bg-secondary text-center" style="width: 150px;">50% Height</div>
        <div class="h-75 d-inline-block bg-warning text-center" style="width: 150px;">75% Height</div>
        <div class="h-100 d-inline-block text-bg-info text-center" style="width: 150px;">100% Height </div>
        <div class="h-auto d-inline-block text-bg-danger text-center" style="width: 150px;">Auto Height</div>
      </div>
    </body>
    </html>

使用類 mw-100 設定 max-width: 100%。在以下示例中，我們演示了此類的用法

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Sizing</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="text-bg-light" style="width: 50%; height: 100px;">
        <div class="mw-100 text-bg-warning text-center" style="width: 200%;">Maximum width 100%</div>
      </div>
    </body>
    </html>

使用類 mh-100 設定 max-height: 100%。在以下示例中，我們演示了此類的用法

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Sizing</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="text-bg-light" style="height: 100px;">
        <div class="mh-100 text-bg-warning" style="width: 100px; height: 200px;">Maximum height 100%</div>
      </div>
    </body>
    </html>

相對於視口

可以修改元素相對於視口的高度和寬度。

min-vw-100 - 設定最小寬度為 100 視口寬度。
min-vh-100 - 設定最小高度為 100 視口高度。
vw-100 - 將元素的寬度設定為正好 100 視口寬度。
vh-100 - 將元素的高度設定為正好 100 視口高度。

示例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Sizing</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-bg-light" >
        <div class="min-vw-100 text-bg-primary p-3  my-2 d-inline-block">Minimum width (min-vw-100)</div>
        <div class="vw-100 text-bg-warning p-3 my-2 d-inline-block">Width (vw-100)</div>
        <div class="min-vh-100 text-bg-secondary p-3 mx-2 d-inline-block ">Minium height (min-vh-100)</div>
        <div class="vh-100 text-bg-danger p-3 mx-2 d-inline-block">Height (vh-100)</div>
      </div>
    </body>
    </html>

列印頁面

廣告