Html bootstrap 4 是否有内置的水平分隔器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41411155/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Does bootstrap 4 have a built in horizontal divider?
提问by user7339197
Does bootstrap 4 have a built in horizontal divider? I can do this,
bootstrap 4 是否有内置的水平分隔器？我可以做这个，
<style type="text/css">
.h-divider{
margin-top:5px;
margin-bottom:5px;
height:1px;
width:100%;
border-top:1px solid gray;
}
</style>
But I want to use the built in bootstrap css, I can't find it anywhere in the docs, maybe I'm missing it.
但是我想使用内置的 bootstrap css，我在文档中的任何地方都找不到它，也许我错过了它。
回答by 4castle
HTML already has a built-in horizontal divider called <hr/>(short for "horizontal rule"). Bootstrap styles it like this:
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>回答by Anouar Fadili
Bootstrap 4define a CSS style for the HTML built-in horizontal divider <hr />, so just use it.
Bootstrap 4为 HTML 内置的水平分隔线定义了一个 CSS 样式<hr />，所以只需使用它。
You can also customize margin with spacing utilities: mtfor margin top, mbfor margin bottom and myfor margin top and bottom. The integer represent spacing 1for small margin and 5for huge margin. Here is an example:
您还可以使用间距实用程序自定义边距：mt用于页边距顶部、页mb边距底部以及页my边距顶部和底部。整数表示1小边距和5大边距的间距。下面是一个例子：
<hr class="mt-2 mb-3"/>
<!-- OR -->
<hr class="my-3"/>
<!-- It's like -->
<hr class="mt-3 mb-3"/>
I used to be using just a divwith border-toplike:
我曾经只使用一个divwith border-toplike：
<div class="border-top my-3"></div>
but it's a sillymethod to make the work done, and you can have some issues. So just use <hr />.
但这是完成工作的愚蠢方法，您可能会遇到一些问题。所以只需使用<hr />.
回答by kjdion84
For Bootstrap 4
对于 Bootstrap 4
<hr>still works for a normal divider. However, if you want a divider with text in the middle:
<hr>仍然适用于普通分隔器。但是，如果您想要一个中间带有文本的分隔线：
<div class="row">
<div class="col"><hr></div>
<div class="col-auto">OR</div>
<div class="col"><hr></div>
</div>
回答by user3791372
For dropdowns, yes:
对于下拉菜单，是：
https://v4-alpha.getbootstrap.com/components/dropdowns/
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>
回答by Dale Zak
You can use the mtand mbspacing utilities to add extra margins to the <hr>, for example:
您可以使用mt和mb间距实用程序向 中添加额外的边距<hr>，例如：
<hr class="mt-5 mb-5">
回答by Fares Younis
<div class="form-group col-12">
<hr>
</div>回答by Mihit Gandhi
<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>
This is the sample code for the horizontal divider in bootstrap 4. Output looks like this:
这是引导程序 4 中水平分隔符的示例代码。 输出如下所示：
class="dropdown-divider" used in bootstrap 4, while class="divider" used in bootstrap 3 for horizontal divider
class="dropdown-divider" 在引导程序 4 中使用，而 class="divider" 在引导程序 3 中用于水平分隔符
回答by user2929588
Bootstrap 4 also uses tag for underlining text . However i feel there has to be some spacing to make it look good .
Bootstrap 4 还使用标记为文本加下划线。但是我觉得必须有一些间距才能使它看起来不错。
