引导程序4是否有一个内置的水平分隔符？

小开

最佳答案

HTML 已经有一个内置的水平分隔符 <hr/>(“水平规则”的缩写):

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>

小开

对于下拉列表，是的:

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>

小开

为了4号鞋带

<hr>仍然适用于普通分隔符。但是，如果您想要一个文本在中间的分隔符:

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

小开

Bootstrap 4 为 HTML 内置的水平分隔符 <hr />定义了一个 CSS 样式，因此只需要使用它。

您也可以自定义边距与间距实用程序: 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 />。

小开

<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>

这是引导程序4.产出情况如下:中水平分隔器的示例代码

Class = 引导带4中使用的“下拉分隔符”，而 class = 水平分隔符3中使用的“分隔符”

小开

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

小开

您可以使用 mt和 mb间距实用程序为 <hr>添加额外的边距，例如:

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

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

小开

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

Html:

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

Css:

.dividerClass{
border-top-color: #999
}

小开

下面是一些自定义实用程序类:

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>

小开

对于 Bootstrap v4;

为了一条细线;

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

中等粗细的线;

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

一条粗线;

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

小开

在 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>

小开

这就是我在 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>

视觉效果: