笙亿网络策划

Bootstrap 怎么实现垂直分割线？

约 9 分钟读完 28 阅
文章导读
Previous Quiz Next 本章讨论垂直分割线。自定义垂直分割线助手类用于在常见布局中创建垂直分隔线，类似于<hr>元素。
📋 目录
  1. 一 使用 stacks 的垂直分割线
A A

Bootstrap - 垂直分割线

Previous
Quiz
Next

本章讨论垂直分割线。自定义垂直分割线助手类用于在常见布局中创建垂直分隔线，类似于<hr>元素。

  • 垂直分割线类表示为.vr

  • 它宽度为1px

  • 它具有minimum-height为1em的最小高度

  • 其颜色使用currentColor和opacity设置

您可以根据需要使用额外的样式来自定义垂直分割线。

下面给出的示例展示了.vr类的用法：

示例

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Helper - Vertical rule</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">
        <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.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 rule example</h4>
        <div class="container">
          <div class="row">
          <div class="col-md-3 text-bg-light">
            <p>Text on the left side of vertical divider.</p>
          </div>
          <div class="col-md-1">
            <hr class="vr">
          </div>
          <div class="col-md-3 text-bg-light">
            <p>Text on the right side of vertical divider.</p>
          </div>
          </div>
        </div>
    </body>
</html>

在flex布局中，垂直分割线的高度会根据其容器的尺寸自动调整。

让我们看一个示例，其中垂直分割线的高度基于flex布局：

示例

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Helper - Vertical rule</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">
        <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.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 rule with flex</h4>
        <div class="d-flex flex-row">
          <div class="flex-grow-1">
            <p>Content on the left</p>
          </div>
          <div class="d-flex flex-grow-1" style="height: 200px;">
            <div class="vr"></div>
          </div>
          <div class="flex-grow-1">
            <p>Content on the right</p>
          </div>
        </div>
    </body>
</html>

使用 stacks 的垂直分割线

垂直分割线也可以在 stacks 中使用，用于分隔不同的值。

让我们看一个在 stacks 中使用垂直分割线的示例：

示例

您可以使用 Edit & Run 选项编辑并运行此代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Helper - Vertical rule</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">
        <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.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 rule with stacks</h4>
        <div class="hstack gap-1">
          <div class="p-3 text-bg-info">First item</div>
          <div class="vr"></div>
          <div class="p-3 text-bg-primary">Second item</div>
          <div class="vr"></div>
          <div class="p-3 text-bg-warning">Third item</div>
        </div>
    </body>
</html>