Bootstrap笔记(十七) 常用类别 - 设定宽度、高度大小

最新推荐文章于 2024-08-30 14:27:01 发布

XI_MILU

最新推荐文章于 2024-08-30 14:27:01 发布

阅读量5k

点赞数 16

分类专栏： Bootstrap 文章标签： bootstrap html css

本文链接：https://blog.youkuaiyun.com/XI_MILU/article/details/120330111

版权

Bootstrap 专栏收录该内容

18 篇文章

订阅专栏

这篇博客介绍了如何使用Bootstrap的.w-*和.h-*类来设置HTML元素的宽度和高度。通过.w-25、.w-50、.w-75、.w-100和.w-auto，可以分别设置宽度为25%、50%、75%、100%和自动。同样，.h-25、.h-50、.h-75、.h-100和.h-auto用于设置高度。示例代码展示了不同宽度和高度设置在实际应用中的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常用类别 - 设定宽度、高度大小

- - - 设定宽度
    - 设定高度

设定宽度

我们可以使用 .w-* 类别设定HTML元素佔父元素宽的百分比。
设定值有: 25、50、75、100和auto，分别代表25%、50%、75%、100%和auto(自动，预设值)。

**範例: **

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>寬度大小</title>
</head>
<body>
    <div class="w-25 p-2" style="background-color: pink;">Width 25%</div>
    <div class="w-50 p-2" style="background-color: pink;">Width 50%</div>
    <div class="w-75 p-2" style="background-color: pink;">Width 75%</div>
    <div class="w-100 p-2" style="background-color: pink;">Width 100%</div>
    <div class="w-auto p-2" style="background-color: pink;">Width auto</div>
</body>
</html>

在这里插入图片描述

设定高度

我们可以使用 .h-* 类别设定HTML元素佔父元素高度的百分比。
设定值有: 25、50、75、100和auto，分别代表25%、50%、75%、100%和auto(自动，预设值)。

**範例: **

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CDN -->
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <title>高度大小</title>
</head>
<body>
    <div style="background-color: #eee; height: 100px;" class="text-center">
        <div class="h-25 d-inline-block" style="background-color: pink; width: 120px;">Height 25%</div>
        <div class="h-50 d-inline-block" style="background-color: pink; width: 120px;">Height 50%</div>
        <div class="h-75 d-inline-block" style="background-color: pink; width: 120px;">Height 75%</div>
        <div class="h-100 d-inline-block" style="background-color: pink; width: 120px;">Height 100%</div>
        <div class="h-auto d-inline-block" style="background-color: pink; width: 120px;">Height auto</div>
    </div>
</body>
</html>

在这里插入图片描述