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

93

これが私のコードです：

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

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

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

twitter-bootstrap

— ヘンリー・ヘンリンソン
ソース

140

の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'>（終了タグを応じて）。

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

— バプテム
ソース

3

ありがとう！<div>の内部に<hr>を含める必要があることに気付きませんでした。奇数。

— カイルカールソン

3

過去2年間のある時点で、span12がBootstrapから削除されていると思いますが、それがないためですが、ボディコンテンツと水平方向のルールの両方を行クラスに配置するとうまくいきました。

— ケーシー

1

修正border-color: #EEEEEE -moz-use-text-color #FFFFFF;だけでborder-color: #EEEEEE;

— Slowaways

2

span12はcol-sm-12に置き換えられました

— M_Griffiths

コードのこの部分（border-width: 1px 0;）が2px水平線を引いています！次のように変更する必要があります：水平線border-width: 1px 0 0 0;を作成し1pxます。

— RAM

39

書く代わりに

<hr>

書く

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

そして、通常通り全幅で表示されます。

— 鍋
ソース

4

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

— drzymala 2018年

これはBootstrapの最もエレガントなソリューションです。ありがとうございます。

— クリストファーベールズ

<hr class="w-100">幅を設定するためのより自明の方法のようです。

— ロボベンクライン

38

これを解決するには、HRの背景色を黒に設定します。

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

— ジェームズK
ソース

4

これは問題を正確に解決するものではなく、ハックのようなものです...インラインスタイルを使用するよりも、ブートストラップのスタイルをオーバーライドするための多くのより良い方法があります。

— IonicBurger 2015

1

@DjangoBurgerについて詳しく説明し、ソリューションを共有してください。

— James K

1

@DjangoBurgerはほとんどインラインスタイルについて不満を持っていると思います。このスタイルをクラスに入れ、ここでクラス名を割り当てることができます。私は自分用にソリューションをそのように変更したので、ありがとうございます！

— dreamerkumar

同意しました-それはエレガントな治療法です:)

— James K

完璧に動作します！私はブートストラップを使用していますが、どういうわけか私の<hr>は異常でした-透明ではっきりと見えませんでした。

17

これは、Bootstrapのデフォルトの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>

— リタブラタゴータム
ソース

5

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

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

.container hr {
margin: 2px 0;
}

— フィンスピン
ソース

3

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

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

ボーダーを透明にしないと白くなり、いつも良いとは思いません。

— Asu13
ソース

2

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

— アンディって呼んで
ソース