Il tag <hr> in Twitter Bootstrap non funziona correttamente?

93

Ecco il mio codice:

<div class="container">
<div>
<h1>Welcome TeamName1</h1>
  asdf
  <hr>
  asdf

</div>
</div> <!-- /container -->

Il tag hr non sembra funzionare come mi sarei aspettato. Invece di disegnare una linea, crea uno spazio vuoto, in questo modo:

twitter-bootstrap

— Henry Henrinson
fonte

140

le proprietà CSS di <hr>sono:

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;
}

Corrisponde a una linea orizzontale di 1px con un grigio molto chiaro e un margine verticale di 18px.

e poiché <hr>è all'interno di una <div>classe senza la larghezza dipende dal contenuto di<div>

se desideri che <hr>sia a larghezza intera, sostituisci <div>con <div class='row'><div class='span12'>(con i tag di chiusura corrispondenti).

Se ti aspetti qualcosa di diverso, descrivi cosa ti aspetti aggiungendo un commento.

— baptme
fonte

3

Grazie! Non sapevo che dovevi includere <hr> all'interno di un <div>. Dispari.

— Kyle Carlson

3

Presumo che span12 sia stato rimosso da Bootstrap ad un certo punto negli ultimi due anni perché non ce l'ho, ma mettere il contenuto del mio corpo e la regola orizzontale entrambe nelle classi di riga ha funzionato per me.

— Casey

1

risolvere border-color: #EEEEEE -moz-use-text-color #FFFFFF;solo conborder-color: #EEEEEE;

— Slowaways

2

span12 è stato sostituito da col-sm-12

— M_Griffiths

Questa parte del tuo codice ( border-width: 1px 0;) causa una 2pxlinea orizzontale! Dovresti cambiarlo in: border-width: 1px 0 0 0;per creare una 1pxlinea orizzontale.

— RAM

39

Invece di scrivere

<hr>

Scrivi

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

E visualizzerà l'intera larghezza come di consueto.

— Pentola calda
fonte

4

<div class="w-100"><hr></div>

— drzymala

Questa è la soluzione più elegante per Bootstrap, grazie!

— Christopher Bales

<hr class="w-100">sembra essere un metodo più ovvio per impostare la larghezza.

— Robobenklein

38

Ho risolto questo problema impostando il colore di sfondo HR su nero in questo modo:

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

— James K
fonte

4

Questo non risolve esattamente il problema, è più simile a un trucco ... Ci sono molti modi migliori per superare lo stile del bootstrap che con uno stile in linea.

— IonicBurger

1

Elabora @DjangoBurger e condividi la tua soluzione.

— James K

1

Penso che @DjangoBurger si stia lamentando principalmente degli stili in linea. Avresti potuto inserire questo stile in una classe e assegnare qui il nome della classe. Ho modificato la tua soluzione in questo modo per uso personale, quindi grazie!

— dreamerkumar

D'accordo - è un rimedio elegante :)

— James K

Funziona perfettamente! Sto usando bootstrap e in qualche modo il mio <hr> era insolito: era trasparente e non si vedeva chiaramente.

17

È perché il CSS PREDEFINITO di Bootstrap per <hr />è:

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eeeeee;
}

crea uno spazio di 40 px tra queste due linee

quindi se vuoi cambiare un particolare <hr />stile di margine nella tua pagina puoi provare qualcosa del genere:

<hr style="margin-bottom:5px !important; margin-top:5px !important; " />

se vuoi cambiare l'aspetto / altri stili di qualsiasi particolare <hr /> nella tua pagina come il colore e il tipo di bordo o lo spessore, puoi provare qualcosa del tipo:

<hr style="border-top: 1px dotted #000000 !important; " />

per tutti <hr />nella tua pagina

<style>
   hr {
       border-top: 1px dotted #000000 !important;
       margin-bottom:5px !important; 
       margin-top:5px !important;
   }
</style>

— Ritabrata Gautam
fonte

5

Per impostazione predefinita, l' hrelemento nel file CSS Bootstrap di Twitter ha un margine superiore e inferiore di 18px. Questo è ciò che crea un divario. Se vuoi che lo spazio sia più piccolo dovrai regolare la proprietà del margine hrdell'elemento.

Nel tuo esempio, fai qualcosa del genere:

.container hr {
margin: 2px 0;
}

— finspin
fonte

3

Penso che sarebbe meglio se aggiungessimo il colore del bordo: trasparente come di seguito:

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

Se non metti il bordo trasparente, sarà bianco e non penso che sia sempre buono.

— Asu13
fonte

2

Sono stato in grado di personalizzare hrTag modificando lo stile in linea come tale:

<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>

L'hrTag è ora più spesso e più visibile; è anche un colore grigio più scuro. Il codice bootstrap è in realtà molto flessibile. Come lo snippet dimostra sopra, puoi usare lo stile inline o il tuo codice personalizzato. Spero che questo aiuti qualcuno.

— Chiamami Andy
fonte