1. ホーム
  2. twitter-bootstrap

[解決済み] Twitter Bootstrapの<hr>タグが正しく機能しない?

2023-01-31 07:26:45

質問

以下は私のコードです。

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

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

hrタグは、私が期待するようには動作しないようです。線を引く代わりに、このように隙間ができてしまうのです。

どのように解決するのですか?

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

1pxの横線、ごく薄いグレー、18pxの縦マージンに対応します。

で、なぜなら <hr> の中に <div> の中にある場合、幅は <div>

が必要な場合は <hr> を全幅にしたい場合は <div><div class='row'><div class='span12'> (適宜閉じタグ)を使用します。

もし、違うことを期待するのであれば、コメントを付けて何を期待するかを記述してください。