Горизонтальний подільник для завантаження 3 (не у спадному меню)

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>

Моє запитання: чи є спосіб зробити це без того, щоб він знаходився у спадному меню, наприклад, включити його до будь-якого списку чи подібного меню?

twitter-bootstrap twitter-bootstrap-3

— KeplerIO
джерело

241

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

— вог
джерело

3

<hr />ще краще.

— Ервін Майєр

21

@ErwinMayer <hr />призначений для XHTML. У HTML 4 або 5 це просто<hr>

— Дейв

1

Це стара відповідь, але для тих, хто натрапив сюди, як я, <hr> не слід використовувати для цілей презентації, як у випадку з ОП. Саме для тематичної зміни пунктів. Так само, як і не слід використовувати тег 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

Як я знайшов Bootstrap за замовчуванням <hr/> розмір непривабливий, ось кілька простих HTML та CSS, щоб збалансувати елемент візуально:

HTML:

<hr class="half-rule"/>

CSS:

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

— Девід Меткалф
джерело