Bootstrap - 堆栈

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

stack实用程序类控制元素的堆叠顺序。Stacks 提供了一种快速、简单的方法来应用 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/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>
        <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/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>
        <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/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>
        <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/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>
        <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/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>
        <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/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>
        <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>