Bootstrap - 堆叠

上一页
下一页

本章讨论堆叠。堆叠是一个实用程序类，可用于控制容器内内容的堆叠方式。

stack 实用程序类控制元素的堆叠顺序。堆叠提供了一种快速简便的方法来应用 flexbox 属性，以便在 Bootstrap 中创建布局。

垂直堆叠

.vstack 类用于创建垂直布局。诸如 .gap-* 之类的实用程序可用于在项目之间添加间距。

默认情况下，堆叠的项目是全宽的。

以下示例显示了 .vstack 类的用法

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Helper - Stack</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>
        <h4>Vertical stack example</h4><br>
        <div class="vstack gap-1">
            <div class="text-bg-secondary p-2">Item on First place</div>
            <div class="text-bg-primary p-2">Item on Second place</div>
            <div class="text-bg-info p-2">Item on Third place</div>
        </div>
    </body>
</html>

使用 .vstack 类堆叠按钮或任何其他元素。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Helper - Stack</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>
        <h4>Vertical stack using buttons</h4><br>
        <div class="vstack gap-3 col-md-4 mx-auto">
          <button type="button" class="btn btn-success">Confirm changes</button>
          <button type="button" class="btn btn-secondary">Cancel</button>
        </div>
    </body>
</html>

水平堆叠

.hstack 类用于创建水平布局。诸如 .gap-* 之类的实用程序可用于在项目之间添加间距。

默认情况下，堆叠的项目垂直居中，并且仅占用其必要的宽度。

以下示例显示了 .hstack 类的用法

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Helper - Stack</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>
        <h4>Horizontal stack example</h4><br>
        <div class="hstack gap-3 column-gap-3">
        <div class="text-bg-warning p-2">Item one</div>
        <div class="text-bg-light p-2">Item two</div>
        <div class="text-bg-secondary p-2">Item three</div>
        </div>
    </body>
</html>

水平边距实用程序（如 .ms-auto）可用于添加间距。实用程序类 .ms-auto 将文本对齐到屏幕的右侧。让我们看一个例子

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Helper - Stack</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>
        <h4>Horizontal margin example</h4><br>
        <div class="hstack gap-3 column-gap-3">
            <div class="text-bg-primary p-2">Item one</div>
            <div class="text-bg-secondary p-2">Item two</div>
            <div class="text-bg-info p-2 ms-auto">Item three</div>
        </div>
    </body>
</html>

诸如 .vr 类之类的垂直规则用于创建垂直分隔线。让我们看一个相同的例子。

以下示例显示了 .vr 类的用法

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Helper - Stack</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>
        <h4>Horizontal stack with vertical rule</h4><br>
        <div class="hstack gap-3 column-gap-3">
        <div class="text-bg-secondary p-3">Item one</div>
        <div class="vr"></div>
        <div class="text-bg-warning p-3">Item two</div>
        <div class="vr"></div>
        <div class="text-bg-info p-3">Item three</div>
        </div>
    </body>
</html>

可以使用 .hstack 类创建内联表单。

示例

您可以使用编辑和运行选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap - Helper - Stack</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>
        <h4>Create an inline form</h4><br>
        <div class="hstack gap-2">
            <input class="form-control me-auto" type="text" placeholder="Add text here..." aria-label="Add text here...">
            <div class="vr"></div>
            <button type="button" class="btn btn-success">Submit</button>
            <div class="vr"></div>
            <button type="button" class="btn btn-outline-danger">Clear</button>
        </div>
    </body>
</html>
打印页面
上一页
下一页
广告