Dropdown bootstrap Twitter berjalan di luar layar

151

Saya ingin menerapkan menu dropdown bootstrap twitter, ini kode saya:

<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 berfungsi dengan baik, dropdown saya ditempatkan di sebelah kanan layar dan ketika saya mengklik toggle-dropdown saya, daftar berjalan di luar layar. Sepertinya di layar:

masukkan deskripsi gambar di sini

Bagaimana saya bisa memperbaikinya?

html css twitter-bootstrap pawel
sumber
Jawaban yang benar (untuk bootstrap> = v 3.2.0) untuk pertanyaan ini diselesaikan di sini: stackoverflow.com/questions/23654962/… oleh @cvrebert.
Michael Trouw
Saya yakin kode Anda tidak memiliki tag rentang akhir: </span>
stealthysnacks

Jawaban:

263

menambahkan .pull-rightuntuk ul.dropdown-menuharus melakukannya

Pemberitahuan Penghentian: Pada Bootstrap v3.1.0, .pull-rightpada menu dropdown sudah ditinggalkan . Untuk meluruskan menu, gunakan .dropdown-menu-right.

Ross
sumber
29
Itu adalah pertanyaan yang sepenuhnya terpisah
Dewayne
14
Jawaban ini sebenarnya tidak memperbaiki masalah jika pengguna menggunakan beberapa perangkat layar yang lebih kecil - itu keluar dari sisi kiri menggantikan sisi kanan (pada kenyataannya Anda hanya mengubah tarik-kiri ke kanan-tarik).
Anonim
5
Lihat jawaban krzychu karena Bootstrap.pull-right sudah tidak digunakan lagi
Jeroen
1
@HristoEnev saya juga. Apakah dropdown Anda jauh dari tombol?
Choylton B. Higginbottom
116

Karena menambahkan Bootstrap v3.1.0 .pull-rightsudah usang pada menu dropdown. A .dropdown-menu-rightharus ditambahkan ke ul.dropdown-menugantinya. Documents

krzychu
sumber
10
Bahkan dengan bootstrap terbaru .pull-right bekerja untuk saya, dan .dropdown-menu-right tidak melakukan apa-apa.
Shane Grant
Ini memang bekerja di Bootstrap 4, kecuali Anda menambahkan kelas .dropdown-menu-right ke div.dropdown-menu (bukan ul)
Timothy Kanski
<ul class="dropdown-menu dropdown-menu-right">bekerja untuk saya pada 4.1.1
dw1
22

Untuk Bootstrap 4, menambahkan dropdown-menu-rightkarya. Berikut ini contoh kerjanya ..

http://codeply.com/go/w2MJngNkDQ

praj
sumber
Saya mencoba semua jawaban lain, - dan ini adalah satu-satunya yang bekerja untuk saya juga. Saya menggunakan Bootstrap v. 4.1.0.
Zeth
14

solusi yang tidak perlu memodifikasi HTML hanya CSS

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

Ini sangat berguna untuk menu yang dihasilkan secara dinamis di mana tidak selalu mungkin untuk menambahkan kelas yang direkomendasikan dropdown-menu-rightke elemen terakhir

GiorgosK
sumber
1
ini adalah satu-satunya solusi yang berfungsi untuk bootstrap 4.0.0
charsi
10

Anda dapat menggunakan kelas .dropdown-pull-rightdengan css berikut:

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

Mohan Dere
sumber
2

di Bootstrap 4 Anda dapat menggunakan .dropleft

ubah saja ke:

<span class="dropleft">

atau

tambahkan .dropdown-menu- {lg, med, sm, xs} -baik ke menu dropdown Anda 

<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>
Dedy Setiawan
sumber
1

float-*-right untuk Bootstrap 4

* = xs, sm, md, lg

Jeremy Lynch
sumber
0

Saya tidak dapat meninggalkan komentar karena tingkat SO saya terlalu rendah, tetapi saya hanya memastikan bahwa wadah induk diatur ke "overflow: tersembunyi" seperti itu (juga pastikan posisi diatur).

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