Есть ли у бутстрапа 4 встроенный горизонтальный разделитель?

Есть ли в бутстрапе 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, я не могу найти его нигде в документах, возможно, я его пропустил.

Ответ 1

HTML уже имеет встроенный горизонтальный разделитель, который называется <hr/> (сокращение от "горизонтальное правило"). Bootstrap стили это как это:

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<p>Some text<hr/>More text<p>

Ответ 2

Для Bootstrap 4

<hr> все еще работает для нормального делителя. Однако, если вы хотите делитель с текстом в середине:

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

Ответ 3

в Bootstrap 4.0v

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

вы можете изменить мой-3 на мой-2; m для "поля", y для "сверху и снизу"

Ответ 4

Да, для выпадающих меню:

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>

Ответ 5

<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= "dropdown-divider" используется в начальной загрузке 4, а class= "divider" используется в начальной загрузке 3 для горизонтального разделителя

Ответ 6

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

Ответ 7

Вы можете использовать утилиты интервалов mt и mb, чтобы добавить дополнительные поля в <hr>, например:

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

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

Ответ 8

Bootstrap 4 также использует тег для подчеркивания текста. Однако я чувствую, что должен быть некоторый интервал, чтобы он выглядел хорошо.