web-dev-qa-db-ja.com

Twitter Bootstrapの<hr>タグが正しく機能していませんか？

これが私のコードです：

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

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

Hrタグは思ったとおりには動作しないようです。線を描く代わりに、次のように隙間を作ります。

enter image description here

twitter-bootstrap
87
Henry Henrinson

<hr>のcssプロパティは次のとおりです。

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

これは1pxの水平線に対応し、非常に薄いグレーと18pxの垂直マージンを持っています。

<hr>はクラスなしの<div>の内側にあるため、幅は<div>の内容によって異なります。

<hr>を全角にしたい場合は、<div>を<div class='row'><div class='span12'>に（対応する終了タグを付けて）置き換えます。

何か違うことが予想される場合は、コメントを追加して予想されることを説明してください。

135
baptme

私はこのようにHRの背景色を黒に設定することでこれを解決しました：

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

書く代わりに

<hr>

書きます

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

そしてそれは通常通り全幅を表示します。

28
Hotpot

これは、ブートストラップの<hr />に対するDEFAULT CSSが::であるためです。

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

それはそれらの2行の間に40pxの隙間を作ります

あなたのページの特定の<hr />マージンスタイルを変更したいのであれば、あなたはこのようなことを試すかもしれません::

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

色や境界線の種類、太さなど、ページ内の特定の<hr />の外観やその他のスタイルを変更する場合は、次のようにします。

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

あなたのページのすべての<hr />に対して

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

デフォルトでは、Twitter Bootstrap CSSファイルのhr要素には、上と下の18pxの余白があります。それがギャップを生じさせるものです。ギャップをもっと小さくしたい場合は、hr要素のmarginプロパティを調整する必要があります。

あなたの例では、このようなことをしてください：

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

インラインスタイルを編集することでhrTagをカスタマイズできました。

<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が太くなり、見やすくなりました。それはまた、より濃いグレー色です。ブートストラップコードは実際には非常に柔軟です。スニペットが上に示したように、インラインスタイルまたは独自のカスタムコードを使用できます。これが誰かに役立つことを願っています。

2
Call me Andy

下記のようにborder-color：transparentを追加すれば見栄えが良くなると思います。

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

枠線を透明にしないと白になりますし、それが常に良いとは思われません。

1
Asu13