Czy bootstrap 4 ma wbudowaną poziomą przegrodę? Mogę to zrobić,
<style type="text/css">
.h-divider{
margin-top:5px;
margin-bottom:5px;
height:1px;
width:100%;
border-top:1px solid gray;
}
</style>
Ale chcę użyć wbudowanego css bootstrap, nie mogę go znaleźć nigdzie w dokumentacji, może mi go brakuje.
html
css
bootstrap-4
twitter-bootstrap-4
user7339197
źródło
źródło
border border-primary
zajęcia działająhr
.Bootstrap 4 definiuje styl CSS dla wbudowanego podziału poziomego HTML
<hr />
, więc po prostu go użyj.Możesz także dostosować margines za pomocą narzędzi
mt
do ustawiania odstępów: dla górnego marginesu,mb
dla dolnego marginesu orazmy
dla górnego i dolnego marginesu. Liczba całkowita reprezentuje odstępy1
dla małego marginesu i5
dla dużego marginesu. Oto przykład:<hr class="mt-2 mb-3"/> <!-- OR --> <hr class="my-3"/> <!-- It's like --> <hr class="mt-3 mb-3"/>
Kiedyś używałem tylko
div
zborder-top
:<div class="border-top my-3"></div>
ale to głupia metoda wykonywania pracy i możesz mieć pewne problemy. Więc po prostu użyj
<hr />
.źródło
Dla Bootstrap 4
<hr>
nadal działa dla normalnego dzielnika. Jeśli jednak potrzebujesz separatora z tekstem pośrodku:<div class="row"> <div class="col"><hr></div> <div class="col-auto">OR</div> <div class="col"><hr></div> </div>
źródło
W przypadku list rozwijanych tak:
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>
źródło
Możesz użyć narzędzi
mt
imb
odstępów, aby dodać dodatkowe marginesy do<hr>
, na przykład:<hr class="mt-5 mb-5">
https://getbootstrap.com/docs/4.3/utilities/spacing/
źródło
<div class="form-group col-12"> <hr> </div>
źródło
/* * * ========================================== * 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>
źródło
<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>
To jest przykładowy kod poziomego separatora w bootstrapie 4. Wynik wygląda następująco:
class = "dropdown-divider" używane w bootstrap 4, a class = "divider" używane w bootstrap 3 do poziomego podziału
źródło
Dla Bootstrap v4;
na cienką linię;
<div class="divider"></div>
na średnio grubą żyłkę;
<div class="divider py-1 bg-dark"></div>
na grubą linię;
<div class="divider py-1 bg-dark"><hr></div>
źródło
W moim projekcie używam tego przykładu:
html:
<hr class="my-3 dividerClass"/>
css:
.dividerClass{ border-top-color: #999 }
źródło