Bootstrap 简明教程
Bootstrap - Sizing
本章将讨论 Bootstrap 大小调整。大小调整允许您通过实用程序类调整元素的高度和宽度。
Relative to the parent
宽度和高度实用程序使用 _utilities.scss 中的实用程序 API 创建。它们针对 25% 、 50% 、 75% 、 100% 和 auto 之类值提供默认支持。您可以自定义这些值，以生成不同的实用程序。
Relative to the width
w-25 、 w-50 、 w-75 、 w-100 和 w-auto 类定义每个 div 元素的宽度。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!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 元素的高度。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!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% 。在以下示例中，我们演示了此类的用法：
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!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% 。在以下示例中，我们演示了此类的用法：
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!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
可以根据视口修改元素的宽度和高度。
-
min-vw-100 - 设置视窗宽度的最小宽度 100。
-
min-vh-100 - 设置视窗高度的最小高度 100。
-
vw-100 - 将元素宽度设置得与视窗宽度完全一样（100）。
-
vh-100 - 将元素高度设置得与视窗高度完全一样（100）。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!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>