¿La etiqueta <hr> en Twitter Bootstrap no funciona correctamente?

93

Aquí está mi código:

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

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

La etiqueta hr no parece funcionar como lo esperaba. En lugar de dibujar una línea, crea un espacio, así:

ingrese la descripción de la imagen aquí

twitter-bootstrap Henry Henrinson
fuente

Respuestas:

140

la propiedad css de <hr>son:

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

Corresponde a una línea horizontal de 1px con un gris muy claro y un margen vertical de 18px.

y debido a que <hr>está dentro de una <div>clase sin el ancho depende del contenido de la<div>

si desea que <hr>sea ​​de ancho completo, reemplácelo <div>con <div class='row'><div class='span12'>(con las etiquetas de cierre correspondientes).

Si espera algo diferente, describa lo que espera agregando un comentario.

bautizarme
fuente
3
¡Gracias! No me di cuenta de que tenía que incluir el <hr> dentro de un <div>. Impar.
Kyle Carlson
3
Supongo que span12 se ha eliminado de Bootstrap en algún momento de los últimos dos años porque no lo tengo, pero poner el contenido de mi cuerpo y la regla horizontal en las clases de fila funcionó para mí.
Casey
1
arreglar border-color: #EEEEEE -moz-use-text-color #FFFFFF;con soloborder-color: #EEEEEE;
Slowaways
2
span12 ha sido reemplazado por col-sm-12
M_Griffiths
¡Esta parte de su código ( border-width: 1px 0;) causa una 2pxlínea horizontal! Debería cambiarlo a: border-width: 1px 0 0 0;para hacer una 1pxlínea horizontal.
RAM
39

En lugar de escribir

<hr>

Escribir

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

Y mostrará el ancho completo como de costumbre.

Estofado
fuente
4
<div class="w-100"><hr></div>
drzymala
Esta es la solución más elegante para Bootstrap, ¡gracias!
Christopher Bales
<hr class="w-100">parece ser un método más evidente para establecer el ancho.
Robobenklein
38

Resolví esto configurando el color de fondo de HR en negro de esta manera:

<hr style="width: 100%; color: black; height: 1px; background-color:black;" />
James K
fuente
4
Esto no resuelve exactamente el problema, es más como un truco ... Hay muchas mejores formas de anular el estilo bootstrap que con un estilo en línea.
IonicBurger
1
Por favor, elabore @DjangoBurger y comparta su solución.
James K
1
Creo que @DjangoBurger se queja principalmente de los estilos en línea. Podría haber puesto este estilo en una clase y haberle asignado el nombre de clase aquí. Modifiqué su solución de esa manera para mi propio uso, ¡así que gracias!
dreamerkumar
De acuerdo, ese es un remedio elegante :)
James K
¡Funciona perfectamente! Estoy usando bootstrap y de alguna manera mi <hr> era inusual, era transparente y no se veía claramente.
17

Es porque el CSS DEFAULT de Bootstrap para <hr />es:

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

crea un espacio de 40px entre esas dos líneas

así que si desea cambiar algún <hr />estilo de margen en particular en su página, puede intentar algo como esto:

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

Si desea cambiar la apariencia / otros estilos de cualquier particular <hr /> en su página, como el color y el tipo de borde o el grosor, puede probar algo como:

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

para todos <hr />en tu pagina

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

De forma predeterminada, el hrelemento en el archivo CSS de Twitter Bootstrap tiene un margen superior e inferior de 18px. Eso es lo que crea una brecha. Si desea que el espacio sea más pequeño, deberá ajustar la propiedad de margen del hrelemento.

En su ejemplo, haga algo como esto:

.container hr {
margin: 2px 0;
}
finspin
fuente
3

Creo que se vería mejor si agregamos border-color: transparente como se muestra a continuación:

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

Si no pones el borde transparente, será blanco y no creo que sea bueno todo el tiempo.

Asu13
fuente
2

Pude personalizar hrTag editando el estilo en línea como tal:

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

El hrTag ahora es más grueso y más visible; también es un color gris más oscuro. El código de arranque es realmente muy flexible. Como demuestra el fragmento de código anterior, puede utilizar un estilo en línea o su propio código personalizado. Espero que esto ayude a alguien.

Llamame andy
fuente
0

Es posible que desee uno de estos, para que se corresponda con el diseño de 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>

Sin un DIVelemento de rejilla incluido, el diseño puede fallar en diferentes dispositivos.

F8ER
fuente