logo标签列表

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

htmlcssbootstrap-4twitter-bootstrap-4
171

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，但我在文档中找不到它的位置，也许我错过了。
13个回答
1
这是我在Express.js + Pug中的做法：
CSS:
.divider-text {
    position: relative;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
}
.divider-text span {
    padding: 7px;
    font-size: 12px;
    position: relative;
    z-index: 2;
}
.divider-text:after {
    content: "";
    position: absolute;
    width: 100%;
    border-bottom: 1px solid #ddd;
    top: 55%;
    left: 0;
    z-index: 1;
}

PUG 代码：

p.divider-text
    span.bg-light OR

然后编译成以下内容：

HTML：

<p class="divider-text"><span class="bg-light">OR</span></p>

可视化结果：

enter image description here

1

我在我的项目中使用了这个例子：

html：

 <hr class="my-3 dividerClass"/>

css：

.dividerClass{
  border-top-color: #999
 }
1
同时：<p style="border-top-width: thin; border-top-color: #999; border-top-style: solid;"></p> - nsdb
-1

bootstrap 5.2

<div class="vr"></div>
这不是一个水平分隔符，而是一个垂直分隔符。 - yansusanto
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接