Bootstrap 3 Horizontal Divider (açılır listede değil)

Bootstrap 3Bağlantıları aşağıdaki gibi ayırmak için açılır menülerin içine yerleştirebileceğiniz yatay bir bölücü olduğunu biliyorum :

<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>

Sorum şu: Herhangi bir listeye veya benzer bir menüye koymak gibi bir açılır menü olmadan bunu yapmanın bir yolu var mı?

Evet var, <hr>kodunuzu istediğiniz yere koyabilirsiniz , zaten yönetici paneli kenar çubuğumdan birinde kullanıyorum.

Şu anda yalnızca şunlar için çalışıyor .dropdown-menu:

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

Başka bir kullanım için istiyorsanız, kendi css'nizde, bootstrap.css'yi izleyerek başka bir tane oluşturun:

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

Varsayılan Bootstrap <hr/>boyutunu çirkin bulduğum için , öğeyi görsel olarak dengelemek için bazı basit HTML ve CSS'ler:

HTML:

<hr class="half-rule"/>

CSS:

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