Bootstrap 简明教程

Bootstrap - Vertical rule

本章讨论垂直规则。自定义垂直规则助手在常见布局(如 <hr> 元素)中创建垂直分隔符。

This chapter discusses about vertical rule. The custom vertical rule helper creates vertical dividers in common layouts, like the <hr> element.

  1. The vertical rule class is denoted as .vr

  2. It is 1px wide

  3. It has minimum-height of 1em

  4. Its color is set using currentColor and opacity

你可以根据你的需求使用额外的样式自定义垂直规则。

You can customize the verical rules with additional styles as per your requirement.

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

The example given below shows the usage of .vr class:

Example

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

You can edit and try running this code using the *Edit & Run * option.

<!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 布局中,垂直规则的高度会根据其容器的大小自动调整。

In flex layouts, the height of vertical rule adjusts automatically based on the size of its container.

让我们看一个示例,其中垂直规则的高度基于 flex 布局:

Let’s see an example where the height of vertical rule is based on the flex layout:

Example

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

You can edit and try running this code using the *Edit & Run * option.

<!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>

Vertical rule with stacks

垂直规则还可以在 stacks 中用来分隔不同的值。

Vertical rule can also be used in stacks, to separate the different values.

让我们来看一个在堆栈中使用竖线的示例:

Let’s see an example where the vertical rule is used in stacks:

Example

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

You can edit and try running this code using the *Edit & Run * option.

<!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>