Bootstrap 4有内置的水平分隔符吗？

Question

Bootstrap 4有内置的水平分隔符吗？我可以做到这一点，

<style type="text/css">
.h-divider{
 margin-top:5px;
 margin-bottom:5px;
 height:1px;
 width:100%;
 border-top:1px solid gray;
}
</style>

但我希望使用内置的Bootstrap CSS，但我在文档中找不到它的位置，也许我错过了。

- user7339197

Answer 1

HTML已经有一个内置的水平线分隔符，称为<hr/>（缩写为“horizontal rule”）。Bootstrap将其样式设置为这样：

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<p>
   Some text
   <hr/>
   More text
</p>

- 4castle

---

有时候你需要添加 class="w-100"，否则 <hr> 将显示为一个点。 - Hunter Nelson

在Bootstrap 4中测试，border border-primary 类可以应用于 hr。 - Luke Puplett

这个例子是 <hr> 元素语义化使用的一个很好的示例！ https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/hr - Derick

奇怪的是，我们的Bootstrap 4 scss的hr高度为0，但我们正在使用旧版本的AdminLTE。我不确定他们为什么偏见hr标签。 - SteveExdia

Answer 2

Bootstrap 4 定义了一个CSS样式用于 HTML 内置的水平分割线标签 <hr />，因此只需使用它。

您还可以使用间距辅助类自定义边距：mt 表示顶部边距，mb 表示底部边距，my 表示上下边距。整数代表间距，1 表示小间距，5 表示大间距。以下是一个例子：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<hr class="mt-2 mb-3"/>
<!-- OR -->
<hr class="my-12"/>
<!-- It's like -->
<hr class="mt-3 mb-3"/>

以前我只使用了一个带有border-top的

，例如：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<div class="border-top my-3"></div>

但这种方法很愚蠢，而且可能会出现一些问题。所以最好使用<hr />标签。

- Anouar Fadili

---

请改用 div 而非 span。 - Anuja P

相对于问题，这个答案是正确的，但不应该使用 border-* 作为分隔符。想象一下，如果您想要分离多个行，如果您将 border-* 应用于行，则它将跨越整个父容器。如果您将 border-* 应用于单独的列，则当在移动设备上堆叠时它们看起来不好。唯一的选择是使用 <hr/>，就像已接受的答案建议的那样。 - mai

Answer 3

对于Bootstrap 4

<hr>仍然适用于普通分隔线。但是，如果您想要在中间有文本的分隔线：

<div class="row">
    <div class="col"><hr></div>
    <div class="col-auto">OR</div>
    <div class="col"><hr></div>
</div>

- kjdion84

Answer 4

对于下拉菜单，是的：

https://v4-alpha.getbootstrap.com/components/dropdowns/

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

- user3791372

---

<div class="dropdown-divider"></div> 这个代码可以制作分隔线。 - Rayees AC

Answer 5

针对Bootstrap v4:

用于绘制细线的样式：

<div class="divider"></div>

对于中等粗细的线条；

<div class="divider py-1 bg-dark"></div>

如果需要绘制粗线：

<div class="divider py-1 bg-dark"><hr></div>

- Erdogan

Answer 6

您可以使用mt和mb间距工具来为<hr>添加额外的边距，例如：

<hr class="mt-5 mb-5">

https://getbootstrap.com/docs/4.3/utilities/spacing/

- Dale Zak

---

你是不是指的是<hr class="my-5" />？ - undefined

Answer 7

以下是一些自定义实用类：

hr.dashed {
    border-top: 2px dashed #999;
}

hr.dotted {
    border-top: 2px dotted #999;
}

hr.solid {
    border-top: 2px solid #999;
}


hr.hr-text {
  position: relative;
    border: none;
    height: 1px;
    background: #999;
}

hr.hr-text::before {
    content: attr(data-content);
    display: inline-block;
    background: #fff;
    font-weight: bold;
    font-size: 0.85rem;
    color: #999;
    border-radius: 30rem;
    padding: 0.2rem 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}



/*
*
* ==========================================
* FOR DEMO PURPOSES
* ==========================================
*
*/

body {
    min-height: 100vh;
    background-color: #fff; 
    color: #333;
}
.text-uppercase {
  letter-spacing: .1em;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">

<div class="container py-5">
    <!-- For Demo Purpose -->
    <header class="py-5 text-center">
        <h1 class="display-4">Bootstrap Divider</h1>
        <p class="lead mb-0">Some divider variants using &lt;hr&gt; element.    </p>
    </header>


    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="mb-4">
                <h6 class=" text-uppercase">Dashed</h6>
                <!-- Dashed divider -->
                <hr class="dashed">
            </div>
            <div class="mb-4">
                <h6 class=" text-uppercase">Dotted</h6>
                <!-- Dotted divider -->
                <hr class="dotted">
            </div>
            <div class="mb-4">
                <h6 class="text-uppercase">Solid</h6>
                <!-- Solid divider -->
                <hr class="solid">
            </div>
            <div class="mb-4">
                <h6 class=" text-uppercase">Text content</h6>
                <!-- Gradient divider -->
                <hr data-content="AND" class="hr-text">
            </div>
           
        </div>
    </div>
</div>

- Abdo-Host

Answer 8

   <div class="form-group col-12">
            <hr>
   </div>

- Fares Younis

Answer 9

<div class="dropdown">
  <button data-toggle="dropdown">
      Sample Button
  </button>
  <ul class="dropdown-menu">
      <li>A</li>
      <li>B</li>
      <li class="dropdown-divider"></li>
      <li>C</li>
  </ul>
</div>

这是Bootstrap 4中水平分隔线的示例代码。在Bootstrap 4中使用class="dropdown-divider"，而在Bootstrap 3中使用class="divider"作为水平分隔线的类名。 输出结果如下所示：

- Mihit Gandhi

Answer 10

在 Bootstrap 5 中，你可以像这样操作：

<div class="py-2 my-1 text-center position-relative mx-2">
            <div class="position-absolute w-100 top-50 start-50 translate-middle" style="z-index: 2">
                <span class="d-inline-block bg-white px-2 text-muted">or</span>
            </div>
            <div class="position-absolute w-100 top-50 start-0 border-muted border-top"></div>
</div>

- Nic Bug