Twitter bootstrap หล่นลงไปด้านนอกหน้าจอ

ฉันต้องการที่จะใช้เมนูแบบเลื่อนลง twitter bootstrap นี่คือรหัสของฉัน:

<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ควรจะทำมัน

การเลิกหมายเหตุ:ในฐานะของเงินทุน v3.1.0, .pull-rightในเมนูแบบเลื่อนลงจะเลิก .dropdown-menu-rightไปทางขวาชิดเมนูการใช้งาน

เนื่องจากการเพิ่ม Bootstrap v3.1.0 .pull-rightถูกคัดค้านในเมนูแบบเลื่อนลง .dropdown-menu-rightควรจะเพิ่มul.dropdown-menuแทน เอกสาร

สำหรับ Bootstrap 4 การเพิ่มdropdown-menu-rightผลงาน นี่คือตัวอย่างการทำงาน ..

http://codeply.com/go/w2MJngNkDQ

โซลูชันที่ไม่จำเป็นต้องแก้ไข HTML เท่านั้น CSS คือ

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 คุณสามารถใช้. คล่องแคล่ว

เพียงเปลี่ยนเป็น:

<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 สำหรับ Bootstrap 4

* = xs, sm, md, lg

ฉันไม่สามารถออกความคิดเห็นได้เนื่องจากระดับ SO ของฉันต่ำเกินไป แต่ฉันเพิ่งตรวจสอบให้แน่ใจว่าคอนเทนเนอร์หลักถูกตั้งค่าเป็น "ล้น: ซ่อน" เช่นนั้น (ตรวจสอบให้แน่ใจว่าได้ตั้งตำแหน่งไว้แล้ว)

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