Есть ли в bootstrap 4 встроенный горизонтальный разделитель? Я могу это сделать,
<style type="text/css">
.h-divider{
margin-top:5px;
margin-bottom:5px;
height:1px;
width:100%;
border-top:1px solid gray;
}
</style>
Но я хочу использовать встроенный бутстрап css, я нигде не могу найти его в документации, возможно, мне его не хватает.
html
css
bootstrap-4
twitter-bootstrap-4
user7339197
источник
источник
border border-primary
классы работаютhr
.Bootstrap 4 определяет стиль CSS для встроенного горизонтального разделителя HTML
<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"/>
Раньше я использовать только
div
сborder-top
как:<div class="border-top my-3"></div>
но это глупый метод для выполнения работы, и у вас могут возникнуть некоторые проблемы. Так что просто пользуйся
<hr />
.источник
Для Bootstrap 4
<hr>
еще работает для нормального делителя. Однако, если вам нужен разделитель с текстом посередине:<div class="row"> <div class="col"><hr></div> <div class="col-auto">OR</div> <div class="col"><hr></div> </div>
источник
Для раскрывающихся списков да:
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>
источник
Вы можете использовать утилиты
mt
иmb
интервалы, чтобы добавить дополнительные поля к<hr>
, например:<hr class="mt-5 mb-5">
https://getbootstrap.com/docs/4.3/utilities/spacing/
источник
<div class="form-group col-12"> <hr> </div>
источник
/* * * ========================================== * CUSTOM UTIL CLASSES * ========================================== * */ 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 <hr> element. </p> <p class="font-weight-light mb-0">Snippet by <a href="https://bootstrapious.com" class=""> <u>Bootstrapious</u></a> </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>
источник
<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 для горизонтального разделителя.
источник
Для Bootstrap v4;
для тонкой линии;
<div class="divider"></div>
для средней толстой линии;
<div class="divider py-1 bg-dark"></div>
для толстой линии;
<div class="divider py-1 bg-dark"><hr></div>
источник
Я использую этот пример в своем проекте:
html:
<hr class="my-3 dividerClass"/>
css:
.dividerClass{ border-top-color: #999 }
источник