Bootstrap 3 Horizontal Divider (не в раскрывающемся списке)

98

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

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

Кеплерио
источник

Ответы:

242

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

Vog
источник
3
<hr />даже лучше.
Эрвин Майер
21
@ErwinMayer <hr />предназначен для XHTML. В HTML 4 или 5 это просто<hr>
Дэйв
1
Это старый ответ, но для тех, кто наткнулся здесь, как и я, <hr> не следует использовать для презентации, как в случае с OP. Это для тематической смены абзацев. Точно так же не следует использовать тег P для форматирования элементов управления.
KMC
16

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

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

HTML:

<hr class="half-rule"/>

CSS:

.half-rule { 
    margin-left: 0;
    text-align: left;
    width: 50%;
 }
Дэвид Меткалф
источник