Twitter thả xuống bootstrap đi ra ngoài màn hình

Tôi muốn thực hiện trình đơn thả xuống twitter bootstrap, đây là mã của tôi:

<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>

Dropdown hoạt động tốt, trình đơn thả xuống của tôi được đặt bên cạnh cạnh phải của màn hình và khi tôi nhấp vào nút thả xuống của mình, danh sách sẽ nằm ngoài màn hình. Nó trông giống như trên màn hình:

Làm thế nào tôi có thể sửa chữa nó?

thêm .pull-rightvào ul.dropdown-menunên làm điều đó

Thông báo khấu hao: Kể từ Bootstrap v3.1.0, .pull-righttrên các menu thả xuống không được dùng nữa . Để căn phải một menu, sử dụng .dropdown-menu-right.

Vì việc thêm Bootstrap v3.1.0 .pull-rightkhông được chấp nhận trên các menu thả xuống. A .dropdown-menu-rightnên được thêm vào để ul.dropdown-menuthay thế. Tài liệu

Đối với Bootstrap 4, thêm dropdown-menu-righttác phẩm. Đây là một ví dụ hoạt động ..

http://codeply.com/go/w2MJngNkDQ

một giải pháp không cần sửa đổi HTML chỉ có CSS

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

Nó đặc biệt hữu ích cho các menu được tạo động mà không phải lúc nào cũng có thể thêm lớp được đề xuất dropdown-menu-rightvào phần tử cuối cùng

Bạn có thể sử dụng lớp .dropdown-pull-rightvới css sau:

.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>

trong Bootstrap 4, bạn có thể sử dụng .dropleft

chỉ cần thay đổi thành:

<span class="dropleft">

hoặc là

thêm .dropdown-menu- {lg, med, sm, xs} -right vào menu thả xuống của bạn

<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 cho Bootstrap 4

* = xs, sm, md, lg

Tôi không thể để lại nhận xét vì mức SO của tôi quá thấp, nhưng tôi chỉ đảm bảo rằng bộ chứa cha mẹ được đặt thành "tràn: ẩn" như vậy (cũng đảm bảo vị trí được đặt).

<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>