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>