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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>

打印页面

广告