twitter-bootstrap - Twitter Bootstrap のタグが正しく機能していませんか?

Question

これが私のコードです：

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

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

hr タグが期待どおりに機能していないようです。線を引く代わりに、次のようにギャップを作成します。

Answer 1

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

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

これは、非常に明るい灰色で垂直方向のマージンが18pxの1pxの水平線に対応します。

<hr>クラスなしの中にあるので<div>、幅はコンテンツに依存します<div>

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

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

Answer 2

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

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

Answer 3

Bootstrap のDEFAULT CSS<hr />が ::であるためです。

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>

Answer 4

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

あなたの例では、次のようにします。

.container hr {
margin: 2px 0;
}