无需自定义CSS，Bootstrap 4是否有调整<hr>标签厚度/颜色的类？

嘿，你问的这个问题刚好有现成的Bootstrap 4内置方案，完全不用写自定义CSS就能实现！

调整<hr>厚度 #

Bootstrap 4的边框宽度工具类可以直接作用于<hr>——因为默认的<hr>样式是靠border-top来实现的，我们只需要用针对顶部边框的宽度类就行：

• border-top-2：把厚度改成2px（默认是1px）
• border-top-3：厚度改成3px
• border-top-4：厚度改成4px

举个实际使用的例子：

<!-- 这是一条3px厚的水平线 -->
<hr class="border-top-3">

调整<hr>颜色 #

同样，Bootstrap 4的主题色边框类也能用来改<hr>的颜色，还是用顶部边框的限定类就行，支持所有官方主题色：

• border-top-primary：主蓝色
• border-top-secondary：中性灰
• border-top-success：成功绿
• border-top-danger：危险红
• 还有info（信息蓝）、warning（警告黄）、light（浅灰）、dark（深灰）这些可选

如果想要同时调整厚度和颜色，直接把两个类加在一起就行：

<!-- 2px厚的危险红色水平线 -->
<hr class="border-top-2 border-top-danger">

小提示 #

默认的<hr>已经自带了border: 0和合适的外边距，这些工具类只会修改border-top的宽度和颜色，不会破坏原有的布局样式，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Vikrant Bhat