web-dev-qa-db-ja.com

bootstrap 4には水平方向の仕切りが組み込まれていますか？

bootstrap 4には水平方向の仕切りが組み込まれていますか？私がすることができます、

<style type="text/css">
.h-divider{
 margin-top:5px;
 margin-bottom:5px;
 height:1px;
 width:100%;
 border-top:1px solid gray;
}
</style>

しかし、組み込みのbootstrap cssを使用したいのですが、ドキュメント内で見つけることができず、見つからない可能性があります。

csshtml5css3bootstrap-4twitter-bootstrap-4
40
user7339197

HTMLには<hr/>（「水平ルール」の略）と呼ばれる組み込みの水平分割線が既にあります。 Bootstrapスタイル設定 このように ：

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<p>Some text<hr/>More text<p>
72
4castle

For Bootstrap 4

<hr>は通常の分周器でも機能します。ただし、テキストが中央にある仕切りが必要な場合：

<div class="row">
    <div class="col"><hr></div>
    <div class="col-auto">OR</div>
    <div class="col"><hr></div>
</div>
18
kjdion84

Bootstrap 4.0v

<span class="border-top my-3"></span>

my-3をmy-2に変更できます。 「マージン」はm、「上部と下部」はy

11
Anouar Fadili

ドロップダウンの場合、はい：

https://v4-alpha.getbootstrap.com/components/dropdowns/

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>
7
user3791372
<div class="dropdown">
  <button data-toggle="dropdown">
      Sample Button
  </button>
  <ul class="dropdown-menu">
      <li>A</li>
      <li>B</li>
      <li class="dropdown-divider"></li>
      <li>C</li>
  </ul>
</div>

これは、bootstrap 4の水平デバイダーのサンプルコードです。 出力は次のようになります：

class = "dropdown-divider"はbootstrap 4で使用され、class = "divider"はbootstrap 3で水平方向の仕切りに使用されます

1
Mihit Gandhi

mtおよびmb間隔ユーティリティを使用して、<hr>に余白を追加できます。次に例を示します。

<hr class="mt-5 mb-5">

https://getbootstrap.com/docs/4.3/utilities/spacing/

1
Dale Zak
   <div class="form-group col-12">
            <hr>
   </div>
1
Fares Younis

ブートストラップ4は、テキストに下線を引くためにもタグを使用します。しかし、見た目を良くするためにはある程度の間隔が必要だと思います。

0
user2929588