如何使用 Bootstrap 添加这两行？

Question

如何使用 Bootstrap 添加这两行？我正在尝试制作这样的 header 。在顶部和底部的两侧都有两个空白边框的标题。可以用 Bootstrap 制作吗？我是菜鸟哈哈

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />


<div class="row">
  <hr class="bg-danger border-2 border-top border-danger">
  <div class="h1">HEADER</div>
  <hr class="bg-danger border-2 border-bottom border-danger">
</div>

Answer 1

flex 显示选项允许使用 child-elements 上的 flex-grow: 1 自动对齐文本的左右对齐。在围绕第三个元素的 2 个元素上使用它也会使第三个元素居中。您可以在其中一个生长的宽度上指定宽度以获得偏移量 header.

注意引导程序 'row' class 也使用 display: flex.

像往常一样通过应用 margin-tops 到 fine-tune 它们的垂直对齐方式来移动边框。为对齐的边框保留相同的元素高度（例如，在两者上使用 h1 以应用相同的高度）。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
    <div class="flex-fill border-top border-2 border-danger h1"></div>
    <div class="h1">HEADER</div>
    <div class="flex-fill border-bottom border-2 border-danger h1"></div>
</div>

Answer 2

我在 2 个 span 标签之间使用了 h1，并将 h1 大小设置为 3 个，共 12 个

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="row">
    <span class="col border-top border-5 border-dark"></span>
    <h1 class="col-3 text-center">HEADER</h1>
    <span class="col border-bottom border-5 border-dark"></span>
</div>

Answer 3

您可以使用 flex layout and margins 接近。由于标题元素的行高，可能需要进行一些调整。

body {
  padding: 30px;
}

.h1.lh-min {
  line-height: 24px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="d-flex">
  <hr class="bg-danger border-2 border-top border-danger flex-grow-1 align-self-start m-0 mt-1">
  <div class="h1 lh-min m-0">HEADER</div>
  <hr class="bg-danger border-2 border-bottom border-danger flex-grow-1 align-self-end m-0">
</div>

Answer 4

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
    <div class="flex-fill border-top border-2 border-danger h1"></div>
    <div class="h1 text-center">HEADER</div>
    <div class="flex-fill border-bottom border-2 border-danger h1"></div>
</div>

如何使用 Bootstrap 添加这两行？

How can I add these two lines using Bootstrap?

css

twitter-bootstrap

bootstrap-4

bootstrap-5