부트 스트랩 드롭 다운 버블 오른쪽 정렬 (오른쪽 밀기가 아님)

89

내 상단 메뉴에 장바구니가 있으며 사용 중 push-right내 문제는 드롭 다운 거품이 페이지에서 떨어지는 것입니다. 버블을 오른쪽으로 정렬하여 '클릭'과 오른쪽 정렬되도록 노력하고 있습니다.

이렇게

여기에 이미지 설명 입력

HTML :

<div class="cart pull-right">
  <ul class="nav">
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">CLICK</a>
       <div class="dropdown-menu">
       STUFF
       </div>
    </li>
  </ul>
</div>

html css twitter-bootstrap

— no0ne
소스

2

당신이 가진 것을 다른 사람들에게 보여주기 위해 jsfiddle.net 에 넣는 것이 좋습니다.

— JofryHS

right:0;드롭 다운 을 시도해 보셨습니까?

— Rahul

190

부트 스트랩 3.1 이상

클래스 드롭 다운 메뉴를 포함하는 동일한 div에 .dropdown-menu-right 클래스 추가 :

<div class="dropdown-menu dropdown-menu-right">
    STUFF
</div>

http://getbootstrap.com/components/#dropdowns-alignment

부트 스트랩 2.3 및 3.0

클래스 드롭 다운 메뉴를 포함하는 동일한 div에 .pull-right 클래스를 추가합니다.

<div class="dropdown-menu pull-right">
    STUFF
</div>

이것은 부트 스트랩 3.0을 사용하여 나를 위해 작동하는 것 같습니다.

— Meetri
소스

20

v3.1.0부터 dropdown-menu-right를 사용할 수 있습니다 . 참조 github.com/twbs/bootstrap/blob/v3.1.0/less/dropdowns.less#L135

— 로랑 Dezitter

19

이는 부트 스트랩 클래스 해결할 수 dropdown-menu-right 로 dropdown-menu즉 CSS 속성을 사용하여이 문제에 대한 구체적이고 right: 0;그리고 left: auto;오른쪽 정렬 그것에.

이 솔루션은 저에게 효과적입니다.

출처-http: //getbootstrap.com/components/#btn-dropdowns-dropup (이에 대한 개발자 도구로 이동)

— Jaspreet Singh
소스

1

예, 이것이 올바른 솔루션입니다 (Bootstrap 3.3.7). 그냥 있는지 확인하십시오 당신은 클래스를 추가 dropdown-menu-right받는 사람 ul(안 버튼) 메뉴 옵션을 포함하는

— 미구엘

6

<div class="dropdown-menu dropdown-menu-right">

이것은 boostrap 4.2.1에서 여전히 작동합니다. :)

— 게오르기 피프
소스

5

bootstrap v 3.1.0이 질문 에 대한 대답은 다릅니다.

jsfiddle

<div class="dropdown-menu pull-menu-right">
       STUFF
</div>

— 코딩 애호가
소스

2

알았어!

position:relative;left:0 의 위에 <ul class="dropdown-menu">

— no0ne
소스