Bootstrap笔记(三) 网格系统 - row与column的对齐方式

最新推荐文章于 2025-02-24 22:45:07 发布

XI_MILU

最新推荐文章于 2025-02-24 22:45:07 发布

阅读量1.3k

点赞数

分类专栏： Bootstrap 文章标签：前端 bootstrap

本文链接：https://blog.csdn.net/XI_MILU/article/details/119614184

版权

Bootstrap 专栏收录该内容

18 篇文章

订阅专栏

网格系统 - row与column的对齐方式

- - - row的垂直对齐方式
    - column的水平对齐方式

row的垂直对齐方式

我们可以使用 .align-items-* 类别设定row的垂直对齐方式。

.align-items-start
垂直向上对齐
.align-items-center
垂直置中对齐
.align-items-end
垂直向下对齐

範例:

<!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>Bootstrap網格系統-row的垂直對齊方式</title>
    <style>
    	/* 设定区块的背景颜色与框线，有助于看清楚区块的位置 */
        div[class^="col"] {
            background-color: #EBDEF0;
            border: 0.5px solid purple;
        }
        /* 设定row的背景颜色与框线，有助于看清楚区块在row中的垂直位置 */
        div[class^="row"] {
            background-color: #EEEEEE;
            border: 0.5px solid gray;
            height: 75px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row align-items-start">
            <div class="col">區塊1</div>
            <div class="col">區塊2</div>
        </div>
        <div class="row align-items-center">
            <div class="col">區塊3</div>
            <div class="col">區塊4</div>
        </div>
        <div class="row align-items-end">
            <div class="col">區塊5</div>
            <div class="col">區塊6</div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

column的水平对齐方式

我们可以使用 .justify-content-* 类别设定column的水平对齐方式。

.justify-content-start*
水平向前(容器开头)对齐
.justify-content-end*
水平向后(容器末端)对齐
.justify-content-center*
水平置中对齐
.justify-content-around*
让区块等间距放置(左右有间距，但大小不相等)
.justify-content-evenly*
让区块等间距放置(左右有间距，且大小相等)
.justify-content-between*
让区块之间等间距放置(左右没有间距)

範例:

<!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>Bootstrap網格系統-column的水平對齊方式</title>
    <style>
    	/* 设定容器背景颜色，有助于看清楚间隔 */
        .container {
            background-color: #aaa;
        }
        /* 设定区块的背景颜色与框线，有助于看清楚区块的位置 */
        div[class^="col"] {
            background-color: #EBDEF0;
            border: 0.5px solid purple;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row justify-content-start">
            <div class="col-4">區塊1</div>
            <div class="col-4">區塊2</div>
        </div>
        <div class="row justify-content-center">
            <div class="col-4">區塊3</div>
            <div class="col-4">區塊4</div>
        </div>
        <div class="row justify-content-end">
            <div class="col-4">區塊5</div>
            <div class="col-4">區塊6</div>
        </div>
        <div class="row justify-content-around">
            <div class="col-4">區塊7</div>
            <div class="col-4">區塊8</div>
        </div>
        <div class="row justify-content-between">
            <div class="col-4">區塊9</div>
            <div class="col-4">區塊10</div>
        </div>
        <div class="row justify-content-evenly">
            <div class="col-4">區塊11</div>
            <div class="col-4">區塊12</div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述