[twitter-bootstrap] Bootstrap 3 Horizontal Divider (드롭 다운에 없음)

Program / 글쓴이

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

내 질문은 다음과 같습니다. 드롭 다운에없는 목록이나 유사한 메뉴에 넣는 것과 같이이를 수행 할 수있는 방법이 있습니까?

답변

예, <hr>원하는 곳에 간단히 코드 를 넣을 수 있습니다. 이미 관리자 패널 사이드 바 중 하나에서 사용하고 있습니다.

답변

현재는 .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;
}

답변

기본 부트 스트랩을 찾았을 때 <hr/> 크기가보기 흉한 으므로 다음은 요소의 시각적 균형을 맞추기위한 간단한 HTML 및 CSS입니다.

HTML :

<hr class="half-rule"/>

CSS :

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

답변