A tag <hr> no Bootstrap do Twitter não está funcionando corretamente?

93

Aqui está o meu código:

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

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

A tag hr não parece funcionar como eu esperava. Em vez de desenhar uma linha, ele cria uma lacuna, assim:

insira a descrição da imagem aqui

twitter-bootstrap Henry Henrinson
fonte

Respostas:

140

a propriedade css de <hr>são:

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 uma linha horizontal de 1px com um cinza muito claro e margem vertical de 18px.

e como <hr>está dentro de uma <div>classe sem classe, a largura depende do conteúdo do<div>

se desejar que <hr>seja de largura total, substitua <div>por<div class='row'><div class='span12'> (pelas tags de fechamento de acordo).

Se você espera algo diferente, descreva o que espera adicionando um comentário.

batizar
fonte
3
Obrigado! Não percebi que você precisava incluir o <hr> dentro de um <div>. Ímpar.
Kyle Carlson
3
Estou assumindo que span12 foi removido do Bootstrap em algum ponto nos últimos dois anos porque eu não o tenho, mas colocar o conteúdo do meu corpo e a régua horizontal nas classes de linha funcionou para mim.
Casey de
1
corrigir border-color: #EEEEEE -moz-use-text-color #FFFFFF;apenas comborder-color: #EEEEEE;
Slowaways
2
span12 foi substituído por col-sm-12
M_Griffiths
Esta parte do seu código ( border-width: 1px 0;) causa uma 2pxlinha horizontal! Você deve alterá-lo para: border-width: 1px 0 0 0;para fazer uma 1pxlinha horizontal.
RAM
39

Em vez de escrever

<hr>

Escrever

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

E exibirá a largura total normalmente.

Hotpot
fonte
4
<div class="w-100"><hr></div>
drzymala,
Esta é a solução mais elegante para Bootstrap, obrigado!
Christopher Bales de
<hr class="w-100">parece ser um método mais evidente para definir a largura.
Robobenklein
38

Resolvi isso definindo a cor de fundo de RH para preto assim:

<hr style="width: 100%; color: black; height: 1px; background-color:black;" />
James K
fonte
4
Isso não está exatamente resolvendo o problema, mais como um hack ... Existem muitas maneiras melhores de substituir o estilo bootstrap do que com um estilo embutido.
IonicBurger de
1
Elabore @DjangoBurger e compartilhe sua solução.
James K de
1
Acho que @DjangoBurger está reclamando principalmente dos estilos embutidos. Você poderia ter colocado este estilo em uma classe e atribuído o nome da classe aqui. Modifiquei sua solução dessa forma para meu próprio uso, então, obrigado!
dreamerkumar
Concordo - isso é um remédio elegante :)
James K
Funciona perfeitamente! Estou usando bootstrap e, de alguma forma, meu <hr> era incomum - era transparente e não era visto com clareza.
17

É porque o CSS DEFAULT do Bootstrap para <hr />é ::

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

cria uma lacuna de 40px entre essas duas linhas

então, se você quiser alterar qualquer <hr />estilo de margem específico em sua página, você pode tentar algo como isto:

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

se você deseja alterar a aparência / outros estilos de qualquer particular <hr /> em sua página, como cor e tipo de borda ou espessura, você pode tentar algo como:

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

para todos <hr />em sua página

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

Por padrão, o hrelemento no arquivo CSS do Twitter Bootstrap tem uma margem superior e inferior de 18px. É isso que cria uma lacuna. Se você quiser que o intervalo seja menor, você precisará ajustar a propriedade de margem do hrelemento.

Em seu exemplo, faça algo assim:

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

Acho que ficaria melhor se adicionássemos border-color: transparent conforme abaixo:

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

Se você não colocar a borda transparente ela ficará branca e eu não acho que seja bom o tempo todo.

Asu13
fonte
2

Consegui personalizar a hrTag editando o estilo embutido da seguinte forma:

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

O hrTag agora é mais espesso e mais visível; também é uma cor cinza mais escura. O código de bootstrap é muito flexível. Como o snippet demonstra acima, você pode usar estilo embutido ou seu próprio código personalizado. Espero que isso ajude alguém.

Me chame de Andy
fonte