Bootstrap 简明教程
Bootstrap - Sizing
本章将讨论 Bootstrap 大小调整。大小调整允许您通过实用程序类调整元素的高度和宽度。
This chapter discusses about Bootstrap sizing. Sizing allows you to adjust the height and width of an element through the utility classes.
Relative to the parent
宽度和高度实用程序使用 _utilities.scss 中的实用程序 API 创建。它们针对 25% 、 50% 、 75% 、 100% 和 auto 之类值提供默认支持。您可以自定义这些值，以生成不同的实用程序。
The width and height utilities are created using the utility API found in _utilities.scss. They come with default support for values like 25%, 50%, 75%, 100%, and auto. You can customize these values to generate different utilities.
Relative to the width
w-25 、 w-50 、 w-75 、 w-100 和 w-auto 类定义每个 div 元素的宽度。
The w-25, w-50, w-75, w-100, and w-auto classes define the width of each div element.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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>Relative to the height
h-25 、 h-50 、 h-75 、 h-100 和 h-auto 类负责设置每个 div 元素的高度。
The classes h-25, h-50, h-75, h-100, and h-auto are responsible for setting the height of each div element.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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% 。在以下示例中，我们演示了此类的用法：
Use class mw-100 to set the max-width: 100%. In the following example, we demonstrate the use of this class:
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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% 。在以下示例中，我们演示了此类的用法：
Use class mh-100 to set the max-height: 100%. In the following example, we demonstrate the use of this class:
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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>Relative to the viewport
可以根据视口修改元素的宽度和高度。
It is possible to modify the width and height of elements relative to the viewport.
-
min-vw-100 - sets a minimum width of 100 viewport width.
-
min-vh-100 - sets a minimum height of 100 viewport height.
-
vw-100 - sets the width of the element to be exactly 100 viewport width.
-
vh-100 - sets the height of the element to be exactly 100 viewport height.
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!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>