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>

但是我想使用内置的引导程序 css，我在文档中的任何地方都找不到它，也许我错过了它。

原文由 user7339197 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

HTML 已经有一个名为 <hr/> 的内置水平分隔符（“水平规则”的缩写）。 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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Bootstrap 4 为 HTML 内置水平分隔线定义了一个 CSS 样式 <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"/>

我以前只使用 div 和 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 发布，翻译遵循 CC BY-SA 4.0 许可协议