Bootstrap 3 Horizo​​ntal Divider（ドロップダウンにはありません）

私Bootstrap 3は、次のようにリンクを区切るためにドロップダウンメニュー内に配置できる水平方向の仕切りがあることを知っています。

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
  <li role="presentation" class="dropdown-header">Dropdown header</li>
   ...
  <li role="presentation" class="divider"></li>
</ul>

私の質問は次のとおりです。ドロップダウンリストにない状態でこれを行う方法はありますか。

はい、あり<hr>ます。コードを好きな場所に配置するだけで済みます。すでに管理パネルのサイドバーの1つで使用しています。

現在それはのためにだけ働きます.dropdown-menu：

.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

それを他の用途に使用したい場合は、独自のcssで、bootstrap.cssに従って別のものを作成します。

.divider {
  height: 1px;
  width:100%;
  display:block; /* for use on default inline elements like span */
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

デフォルトのブートストラップ<hr/>サイズが見苦しいことに気付いたので、要素を視覚的にバランスさせるための簡単なHTMLとCSSを次に示します。

HTML：

<hr class="half-rule"/>

CSS：

.half-rule { 
    margin-left: 0;
    text-align: left;
    width: 50%;
 }