引导程序4是否具有内置的水平分隔器?


104

引导程序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,我在文档的任何地方都找不到它,也许我错过了。

Answers:


160

HTML已经有一个称为的内置水平分隔符<hr/>(“ horizo​​ntal rule”的缩写)。引导程序样式如下

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>


7
有时您需要添加class =“ w-100”,否则<hr>将显示为点。getbootstrap.com/docs/4.0/utilities/sizing
Hunter Nelson

在Bootstrap 4中进行了测试,border border-primary类适用于hr
路加·普普利特

60

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

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

我曾经只使用divwith border-top

<div class="border-top my-3"></div>

但这是完成工作的愚蠢方法,您可能会遇到一些问题。所以就用吧<hr />


3
<div class =“ border-top my-3”> </ div>代替跨度,请使用div
Anuja Deshpande Patil

相对于这个问题,这个答案是正确的,但是border- *不应用作分隔线。假设您要分隔多行。如果将border- *应用于一行,它将在父容器的一侧到另一侧。如果将border- *应用于单独的列,则当它们堆叠在移动设备上时,它们看起来不会很好。唯一的选择是使用<hr />,就像建议的答案一样。

40

对于Bootstrap 4

<hr>仍然适用于普通除法器。但是,如果要在中间插入文本的分隔线:

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

14

对于下拉菜单,是:

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>


3

对于Bootstrap v4;

细线

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

用于中等粗线;

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

粗线

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


2

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

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>


1
<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中水平分隔器的示例代码。 输出看起来像这样:

引导程序4中使用的class =“ dropdown-divider”,而引导程序3中使用的class =“ divider”用于水平分隔器


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.