드롭 다운 메뉴의 부트 스트랩 3 화살표

드롭 다운 메뉴의 부트 스트랩 3 화살표

---

부트 스트랩 2에서 드롭 다운 메뉴에는 여기에서 볼 수 있듯이 위쪽 화살표가 있습니다 (나는 carret에 대해 말하는 것이 아닙니다). 이제 부트 스트랩 3 또는 최신 git을 사용하면이 화살표는 아래의 간단한 예제 나 부트 스트랩 홈페이지 의 예제 에 존재하지 않습니다 .

부트 스트랩 3을 사용하여이 화살표를 다시 추가하려면 어떻게해야합니까?

  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      Menu
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">a</a></li>
      <li><a href="#">b</a></li>
      <li><a href="#">c</a></li>
    </ul>
  </li>

추신 : 정확하게 그림은 다른 stackoverflow 기사 에서 볼 수 있습니다 .

---

: after 및 : before css 규칙을 dropdown-menu. 이 규칙은 Bootstrap 2에서 가져온 것이며 드롭 다운 위에 삼각형을 그리는 것입니다.

JSFiddle 데모

.dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.dropdown-menu:after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: '';
}

어떻게 혼란스러워? CSS 삼각형을 설명하는 애니메이션은 여기를 참조하십시오.

---

이에 대한 후속 조치-화살표가 올바르게 배치되도록하려면 (예 : 오른쪽 정렬 된 navbar 요소에서 사용할 때와 같이 화살표가 오른쪽 정렬되도록하려면 다음 추가 CSS가 필요합니다.)

.navbar .navbar-right > li > .dropdown-menu:before,
.navbar .nav > li > .dropdown-menu.navbar-right:before {
    right: 12px; left: auto;
}

.navbar .navbar-right > li > .dropdown-menu:after,
.navbar .nav > li > .dropdown-menu.navbar-right:after {
    right: 13px; left: auto;
}

"navbar-right"는 navbar의 경우 pull-right 대신 BS3에서 도입되었습니다.

---

Alexander Mistakidis가 제공 한 CSS가 정확합니다. 즉, 부트 스트랩의 드롭 다운 메뉴 위에 화살표를 생성합니다. 반응 형 뷰 (@ user2993108)에 올바르게 배치하려면 다른 미디어 쿼리 또는 중단 점에서 left각 클래스 선택기 ( .dropdown-menu:before, .dropdown-menu:after) 의 속성을 변경할 수 있습니다 .

예를 들면 ...

@media (max-width: 400px) {

.dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 30px; /* change for positioning */
  ...
}

.dropdown-menu:after {
  position: absolute;
  top: -6px;
  left: 31px; /* change for positioning */
  ...
}

}

@media (max-width: 767px) and (min-width: 401px) {

.dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 38px; /* change for positioning */
  ...
}

.dropdown-menu:after {
  position: absolute;
  top: -6px;
  left: 39px; /* change for positioning */
  ...
}

}

등등...

---

This builds on the work by Alexander Mistakidis and Joyrex to support optional arrows and dropup menus. In my case I did not want to have an arrow on all of the dropdown menus, only some.

With this, you add the arrow class to the dropdown-menu element to get the arrow. If Bootstrap is positioning the dropdown/dropup to the left, also add arrow-right to shift the arrow to the other side.

// add an arrow to the dropdown menus
.dropdown-menu.arrow:before {
  position: absolute;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  content: '';
}
.dropdown-menu.arrow:after {
  position: absolute;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: '';
}

// postion at the top for a 'down' menu
.dropdown .dropdown-menu.arrow:before {
  top: -7px;
  border-bottom: 7px solid #ccc;
  border-bottom-color: rgba(0, 0, 0, 0.2);
}
.dropdown .dropdown-menu.arrow:after {
  top: -6px;
  border-bottom: 6px solid #ffffff;
}

// postion at the bottom for an 'up' menu
.dropup .dropdown-menu.arrow:before {
  bottom: -7px;
  border-top: 7px solid #ccc;
  border-top-color: rgba(0, 0, 0, 0.2);
}
.dropup .dropdown-menu.arrow:after {
  bottom: -6px;
  border-top: 6px solid #ffffff;
}

// support to move the arrow to the right-hand-side
.dropdown-menu.arrow.arrow-right:before,
.dropup .dropdown-menu.arrow.arrow-right:before {
  right: 15px;
  left: auto;
}
.dropdown-menu.arrow.arrow-right:after,
.dropup .dropdown-menu.arrow.arrow-right:after {
  right: 16px;
  left: auto;
}

참고URL : https://stackoverflow.com/questions/19983995/bootstrap-3-arrow-on-dropdown-menu