it-roy-ru.com

Bootstrap 3 Горизонтальный разделитель (не в раскрывающемся списке)

Я знаю, что 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>

У меня вопрос: Есть ли способ сделать это без его выпадающего списка, например, поместить его в какой-либо список или подобное меню?

94
KeplerIO

Да, вы можете просто вставить <hr /> в свой код там, где вы хотите, я уже использую его в одной из боковых панелей моей админ-панели.

230
user3931708

В настоящее время это работает только для .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;
}
16
Christina

Поскольку я нашел размер Bootstrap <hr/> по умолчанию неприглядным, вот несколько простых HTML и CSS для визуальной балансировки элемента:

HTML:

<hr class="half-rule"/>

CSS:

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