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>

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

답변:


241

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


3
<hr />더 좋습니다.
Erwin Mayer

21
@ErwinMayer <hr />는 XHTML 용입니다. HTML 4 또는 5에서 그것은 단지<hr>
Dave

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/> 크기가보기 흉한 으므로 다음은 요소의 시각적 균형을 맞추기위한 간단한 HTML 및 CSS입니다.

HTML :

<hr class="half-rule"/>

CSS :

.half-rule { 
    margin-left: 0;
    text-align: left;
    width: 50%;
 }
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.