Oto mój kod:
<div class="container">
<div>
<h1>Welcome TeamName1</h1>
asdf
<hr>
asdf
</div>
</div> <!-- /container -->
Znacznik hr nie działa tak, jak bym się spodziewał. Zamiast rysować linię, tworzy lukę, jak na przykład:
Oto mój kod:
<div class="container">
<div>
<h1>Welcome TeamName1</h1>
asdf
<hr>
asdf
</div>
</div> <!-- /container -->
Znacznik hr nie działa tak, jak bym się spodziewał. Zamiast rysować linię, tworzy lukę, jak na przykład:
Odpowiedzi:
właściwość css <hr>
:
hr {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #EEEEEE -moz-use-text-color #FFFFFF;
border-style: solid none;
border-width: 1px 0;
margin: 18px 0;
}
Odpowiada to poziomej linii 1 piks. Z bardzo jasnoszarym i pionowym marginesem 18 pikseli.
a ponieważ <hr>
znajduje się wewnątrz a <div>
bez klasy, szerokość zależy od zawartości<div>
jeśli chcesz, <hr>
aby mieć pełną szerokość, wymienić <div>
z <div class='row'><div class='span12'>
(zgodnie z zamykające znaczniki).
Jeśli spodziewasz się czegoś innego, opisz, czego oczekujesz, dodając komentarz.
border-color: #EEEEEE -moz-use-text-color #FFFFFF;
tylko zborder-color: #EEEEEE;
border-width: 1px 0;
) powoduje 2px
poziomą linię! Powinieneś to zmienić na: border-width: 1px 0 0 0;
aby utworzyć 1px
poziomą linię.
Zamiast pisać
<hr>
pisać
<hr class="col-xs-12">
I będzie wyświetlać normalnie pełną szerokość.
<div class="w-100"><hr></div>
<hr class="w-100">
wydaje się być bardziej oczywistą metodą ustawiania szerokości.
Rozwiązałem to, ustawiając kolor tła HR na czarny w następujący sposób:
<hr style="width: 100%; color: black; height: 1px; background-color:black;" />
Dzieje się tak, ponieważ DEFAULT CSS Bootstrap dla <hr />
to:
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #eeeeee;
}
tworzy odstęp 40px między tymi dwoma liniami
więc jeśli chcesz zmienić jakiś szczególny <hr />
styl marginesów na swojej stronie, możesz spróbować czegoś takiego:
<hr style="margin-bottom:5px !important; margin-top:5px !important; " />
jeśli chcesz zmienić wygląd / inne style dowolnego elementu <hr />
strony, takie jak kolor i typ obramowania lub grubość, możesz spróbować czegoś takiego:
<hr style="border-top: 1px dotted #000000 !important; " />
dla wszystkich <hr />
na Twojej stronie
<style>
hr {
border-top: 1px dotted #000000 !important;
margin-bottom:5px !important;
margin-top:5px !important;
}
</style>
Udało mi się dostosować hrTag, edytując styl wbudowany w następujący sposób:
<div class="row"> <!-- You can also position the row if need be. -->
<div class="col-md-12 col-lg-12"><!-- set width of column I wanted mine to stretch most of the screen-->
<hr style="min-width:85%; background-color:#a1a1a1 !important; height:1px;"/>
</div>
</div>
HrTag jest teraz grubszy i bardziej widoczny; ma również ciemniejszy szary kolor. Kod bootstrap jest w rzeczywistości bardzo elastyczny. Jak pokazuje powyższy fragment, możesz użyć wbudowanego stylu lub własnego kodu niestandardowego. Mam nadzieję, że to komuś pomoże.
Możesz chcieć jednego z nich, aby odpowiadał układowi Bootstrap:
<div class="col-xs-12">
<hr >
</div>
<!-- or -->
<div class="col-xs-12">
<hr style="border-style: dashed; border-top-width: 2px;">
</div>
<!-- or -->
<div class="col-xs-12">
<hr class="col-xs-1" style="border-style: dashed; border-top-width: 2px;">
</div>
Bez DIV
dołączonego elementu siatki układ może hamować na różnych urządzeniach.