IT

Bootstrap 3 Horizontal Divider (드롭 다운에 없음)

lottoking 2020. 8. 27. 21:16
반응형

Bootstrap 3 Horizontal Divider (드롭 다운에 없음)


다음 과 같이 링크를 분리하기 위해 드롭 다운 메뉴 내부에 배치 할 수있는 가로 구분선이 있습니다.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%;
 }

참고 URL : https://stackoverflow.com/questions/26570946/bootstrap-3-horizontal-divider-not-in-a-dropdown

반응형