Twitter Bootstrap'teki <hr> etiketi düzgün çalışmıyor mu?

94

İşte kodum:

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

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

Hr etiketi beklediğim gibi çalışmıyor. Çizgi çizmek yerine, şöyle bir boşluk yaratır:

twitter-bootstrap

— Henry Henrinson
kaynak

141

css özelliği <hr>şunlardır:

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

Çok açık gri ve 18 piksel dikey kenar boşluğu olan 1 piksellik bir yatay çizgiye karşılık gelir.

ve sınıfsız <hr>bir içinde olduğu <div>için genişlik, içeriğine bağlıdır.<div>

eğer isterseniz <hr>olmak tam genişliği, yerini <div>ile <div class='row'><div class='span12'>(kapanış etiketleri göre birlikte).

Farklı bir şey bekliyorsanız, bir yorum ekleyerek ne beklediğinizi açıklayın.

— vaftiz
kaynak

3

Teşekkürler! <hr> kodunu bir <div> içine dahil etmeniz gerektiğini bilmiyordum. Garip.

— Kyle Carlson

3

Span12'nin Bootstrap'ten son iki yılda bir noktada kaldırıldığını varsayıyorum çünkü buna sahip değilim, ancak vücut içeriğimi ve yatay kuralı her iki satır sınıfına koymak benim için çalıştı.

— Casey

1

border-color: #EEEEEE -moz-use-text-color #FFFFFF;sadece ile düzeltborder-color: #EEEEEE;

— Slowaways

2

span12, col-sm-12 ile değiştirildi

— M_Griffiths

Kodunuzun bu kısmı ( border-width: 1px 0;) 2pxyatay bir çizgiye neden olur ! Bunu şu şekilde değiştirmelisiniz: yatay bir çizgi border-width: 1px 0 0 0;yapmak için 1px.

— RAM

42

Yazmak yerine

<hr>

Yazmak

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

Ve normal olarak tam genişlik gösterecektir.

— Güveç
kaynak

6

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

— drzymala

Bootstrap için en zarif çözüm bu, teşekkürler!

— Christopher Bales

<hr class="w-100">genişliği ayarlamak için daha apaçık bir yöntem gibi görünüyor.

— Robobenklein

40

Bunu, HR arka plan rengini siyaha ayarlayarak çözdüm:

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

— James K
kaynak

4

Bu tam olarak sorunu çözmüyor, daha çok bir hack gibi ... Önyükleme stilini aşmanın satır içi stilden daha iyi birçok yolu var.

— IonicBurger

1

Lütfen @DjangoBurger'ı detaylandırın ve çözümünüzü paylaşın.

— James K

1

Sanırım @DjangoBurger çoğunlukla satır içi stillerden şikayet ediyor. Bu stili bir sınıfa koyabilir ve sınıf adını buraya atayabilirdiniz. Çözümünüzü kendi kullanımım için bu şekilde değiştirdim, bu yüzden teşekkür ederim!

— dreamerkumar

Kabul edildi - bu zarif bir çare :)

— James K

Mükemmel çalışıyor! Bootstrap kullanıyorum ve bir şekilde <hr> alışılmadık bir durumdu - şeffaftı ve açıkça görülmedi.

17

Bootstrap adlı çünkü öyle DEFAULT CSS için <hr />olduğu ::

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

bu iki çizgi arasında 40 piksel boşluk oluşturur

bu nedenle <hr />, sayfanızdaki belirli bir kenar boşluğu stilini değiştirmek isterseniz, bunun gibi bir şey deneyebilirsiniz

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

<hr /> Sayfanızdaki renk ve kenarlık türü veya kalınlık gibi herhangi bir özelliğin görünümünü / diğer stillerini değiştirmek istiyorsanız, aşağıdaki gibi bir şey deneyebilirsiniz:

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

<hr />sayfanızdaki herkes için

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

— Ritabrata Gautam
kaynak

5

Varsayılan olarak, hrTwitter Bootstrap CSS dosyasındaki öğenin üst ve alt kenar boşluğu 18px. Bir boşluk yaratan budur. Boşluğun daha küçük olmasını istiyorsanız, hröğenin marj özelliğini ayarlamanız gerekir .

Örneğinizde şuna benzer bir şey yapın:

.container hr {
margin: 2px 0;
}

— finspin
kaynak

3

Bence aşağıdaki gibi border-color: transparent eklersek daha iyi görünecektir:

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

Sınırı şeffaf koymazsanız beyaz olur ve bunun her zaman iyi olduğunu düşünmüyorum.

— Asu13
kaynak

2

Satır içi stili şu şekilde düzenleyerek hrTag'i özelleştirebildim:

<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 artık daha kalın ve daha görünür; aynı zamanda daha koyu gri bir renktir. Önyükleme kodu aslında çok esnektir. Snippet'in yukarıda gösterdiği gibi, satır içi stili veya kendi özel kodunuzu kullanabilirsiniz. Umarım bu birine yardımcı olur.

— Beni ara Andy
kaynak

0

Bootstrap düzenine karşılık gelmesi için bunlardan birini isteyebilirsiniz:

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

Bir DIVızgara elemanı dahil edilmediğinde, düzen farklı cihazlarda fren yapabilir.

— F8ER
kaynak