Tag <hr> w Twitter Bootstrap nie działa poprawnie?

94

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:

wprowadź opis obrazu tutaj

twitter-bootstrap Henry Henrinson
źródło

Odpowiedzi:

141

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.

baptme
źródło
3
Dzięki! Nie zdawałem sobie sprawy, że musisz uwzględnić <hr> wewnątrz <div>. Dziwny.
Kyle Carlson
3
Zakładam, że span12 został usunięty z Bootstrap w pewnym momencie w ciągu ostatnich dwóch lat, ponieważ go nie mam, ale umieszczenie zawartości ciała i reguły poziomej w klasach wierszowych zadziałało dla mnie.
Casey
1
napraw border-color: #EEEEEE -moz-use-text-color #FFFFFF;tylko zborder-color: #EEEEEE;
Slowaways
2
span12 został zastąpiony przez col-sm-12
M_Griffiths
Ta część twojego kodu ( border-width: 1px 0;) powoduje 2pxpoziomą linię! Powinieneś to zmienić na: border-width: 1px 0 0 0;aby utworzyć 1pxpoziomą linię.
RAM
41

Zamiast pisać

<hr>

pisać

<hr class="col-xs-12">

I będzie wyświetlać normalnie pełną szerokość.

Hotpot
źródło
6
<div class="w-100"><hr></div>
drzymała
To najbardziej eleganckie rozwiązanie dla Bootstrap, dziękuję!
Christopher Bales
<hr class="w-100">wydaje się być bardziej oczywistą metodą ustawiania szerokości.
Robobenklein
40

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;" />
James K.
źródło
4
To nie jest do końca rozwiązanie problemu, bardziej jak hack ... Istnieje wiele lepszych sposobów na przezwyciężenie stylizacji bootstrap niż styl inline.
IonicBurger
1
Opisz @DjangoBurger i udostępnij swoje rozwiązanie.
James K,
1
Myślę, że @DjangoBurger głównie narzeka na style inline. Mogłeś umieścić ten styl w klasie i tutaj przypisać nazwę klasy. Zmodyfikowałem Twoje rozwiązanie w ten sposób na własny użytek, więc dziękuję!
dreamerkumar
Zgoda - to elegancki środek :)
James K
Działa świetnie! Używam bootstrap i jakoś mój <hr> był nietypowy - był przezroczysty i nie był wyraźnie widoczny.
17

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>
Ritabrata Gautam
źródło
5

Domyślnie hrelement w pliku CSS Twitter Bootstrap ma górny i dolny margines 18px. To właśnie tworzy lukę. Jeśli chcesz, aby odstęp był mniejszy, musisz dostosować właściwość marginesu hrelementu.

W swoim przykładzie zrób coś takiego:

.container hr {
margin: 2px 0;
}
finspin
źródło
3

Myślę, że lepiej by wyglądało, gdybyśmy dodali border-color: transparent jak poniżej:

<hr style="width: 100%; background-color: black; height: 1px; border-color : transparent;" />

Jeśli nie umieścisz przezroczystej ramki, będzie biała i nie sądzę, żeby to było dobre przez cały czas.

Asu13
źródło
2

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.

Mów mi Andy
źródło
0

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 DIVdołączonego elementu siatki układ może hamować na różnych urządzeniach.

F8ER
źródło