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

Question

私は知っています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>

私の質問は、ドロップダウンリストを表示せずにこれを実行する方法（リストや同様のメニューに配置するなど）はありますか。

Answer 1

はい、あります、あなたがそれを望むところにあなたが単にあなたのコードの<hr />を置くことができます、私はすでに私の管理者パネルサイドバーの1つでそれを使います。

Answer 2

現在のところ、これは.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;
}

Answer 3

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

HTML：

<hr class="half-rule"/>

CSS：

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