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:

twitter-bootstrap

— Henry Henrinson
fonte

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