트위터 부트 스트랩 드롭 다운이 화면 밖으로 나갑니다.

트위터 부트 스트랩 드롭 다운 메뉴를 구현하고 싶습니다. 내 코드는 다음과 같습니다.

<span class="dropdown"> 
<a href="#menu1" class="dropdown-toggle" data-toggle="dropdown" ><img class="left" src="/static/img/topmenu_preferences.png" /><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>
  <li class="divider"></li>
  <li><a href="#">d</a></li>
</ul>

드롭 다운이 제대로 작동하고 드롭 다운이 화면의 오른쪽 가장자리 옆에 있으며 드롭 다운 토글을 클릭하면 목록이 화면 외부로 이동합니다. 화면에 다음과 같이 보입니다.

어떻게 고칠 수 있습니까?

추가 .pull-right로하는 것은 ul.dropdown-menu그것을해야

더 이상 사용되지 않음 공지 : Bootstrap v3.1.0부터 .pull-right드롭 다운 메뉴가 더 이상 사용되지 않습니다 . 메뉴를 오른쪽 정렬하려면을 사용하십시오 .dropdown-menu-right.

.pull-right드롭 다운 메뉴에서 Bootstrap v3.1.0 추가 가 더 이상 사용되지 않습니다. 대신 A .dropdown-menu-right를 추가해야 ul.dropdown-menu합니다. 문서

부트 스트랩 4의 경우 dropdown-menu-right작동합니다. 다음은 실제 예입니다 ..

http://codeply.com/go/w2MJngNkDQ

CSS 만 HTML을 수정할 필요가없는 솔루션

li.dropdown:last-child .dropdown-menu {
  right: 0;
  left: auto;
}

항상 dropdown-menu-right마지막 요소에 권장 클래스 를 추가 할 수없는 동적 생성 메뉴에 특히 유용합니다.

.dropdown-pull-right다음 CSS와 함께 클래스 를 사용할 수 있습니다 .

.dropdown-pull-right {
  float: right !important;
  right: 0;
  left: auto;
}

.dropdown-pull-right>.dropdown-menu {
  right: 0;
  left: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>


<div class="dropdown dropdown-pull-right btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
  Open Dropdown
  <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

Bootstrap 4에서는 .dropleft를 사용할 수 있습니다

그냥 다음으로 변경하십시오.

<span class="dropleft">

또는

드롭 다운 메뉴에 .dropdown-menu- {lg, med, sm, xs}-오른쪽 추가

<div class="dropdown-menu dropdown-menu-sm-right" aria-labelledby="dropdown03">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
</div>

float-*-right 부트 스트랩 4

* = xs, sm, md, lg

내 SO 수준이 너무 낮아서 의견을 남길 수는 없지만 부모 컨테이너가 "overflow : hidden"으로 설정되어 있는지 확인했습니다 (또한 위치가 설정되어 있는지 확인하십시오).

<div style="overflow:hidden;position:relative">
    <span class="dropdown"> 
    <a href="#menu1" class="dropdown-toggle" data-toggle="dropdown" ><img class="left" src="/static/img/topmenu_preferences.png" /><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>
      <li class="divider"></li>
      <li><a href="#">d</a></li>
    </ul>
</div>