Bootstrap: Posisi menu dropdown relatif terhadap item navbar


108

Saya memiliki dropdown berikut

<label class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#">
    Action <b class="caret"></b></label>
<ul class="dropdown-menu" role="menu" aria-labelledby="lang-selector" id="lang-selector">
    dropdown content goes here
</ul>

Sudut kiri atas dropdown berada di sudut kiri bawah teks (Action), tetapi saya berharap posisi sudut kanan atas dropdwon berada di kanan bawah teks. Bagaimana saya bisa melakukan itu?

Jawaban:


229

Inilah efek yang kami coba capai:

Menu rata kanan

Kelas yang perlu diterapkan diubah dengan rilis Bootstrap 3.1.0 dan lagi dengan rilis Bootstrap 4. Jika salah satu solusi di bawah ini tampaknya tidak berfungsi, periksa kembali nomor versi Bootstrap yang Anda impor dan coba yang lain.

Bootstrap 3

Sebelum v3.1.0

Anda dapat menggunakan pull-rightkelas untuk melapisi sisi kanan menu dengan tanda sisipan:

<li class="dropdown">
  <a class="dropdown-toggle" href="#">Link</a>
  <ul class="dropdown-menu pull-right">
     <li>...</li>
  </ul>
</li>

Biola: http://jsfiddle.net/joeczucha/ewzafdju/

Setelah v3.1.0

Mulai v3.1.0, kami telah menghentikan .pull-right pada menu drop-down. Untuk meratakan kanan menu, gunakan .dropdown-menu-right. Komponen navigasi rata kanan di bilah navigasi menggunakan versi mixin dari kelas ini untuk menyelaraskan menu secara otomatis. Untuk menggantinya, gunakan .dropdown-menu-left.

Anda dapat menggunakan dropdown-rightkelas untuk melapisi sisi kanan menu dengan tanda sisipan:

<li class="dropdown">
  <a class="dropdown-toggle" href="#">Link</a>
  <ul class="dropdown-menu dropdown-menu-right">
     <li>...</li>
  </ul>
</li>

Biola: http://jsfiddle.net/joeczucha/1nrLafxc/

Bootstrap 4

Kelas untuk Bootstrap 4 sama dengan Bootstrap> 3.1.0, perhatikan saja karena markup sekitarnya telah sedikit berubah:

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#">
    Link
  </a>
  <div class="dropdown-menu dropdown-menu-right">
    <a class="dropdown-item" href="#">...</a>
  </div>
</li>

Biola: https://jsfiddle.net/joeczucha/f8h2tLoc/


1
Saya menguji tarik-kanan dan tarik-kiri di situs web RTL. Mereka bekerja dengan sempurna, tetapi dropdown-menu-right dan dropdown-menu-left tidak.
penasaran1

Penampung (.dropdown) harus memiliki tampilan "inline-bock". Dalam contoh ini LI baik-baik saja, tetapi jika itu adalah DIV, pelurusan akan ditempatkan di ujung elemen blok yang dipengaruhi oleh lebar submenu.
Nicholas

Kelas "dropdown-menu-right" melakukan trik dengan Bootstrap 4 (beta) juga. Terima kasih! "pull-right" tidak berhasil.
Andreas Vogl

menggunakan class="dropdown"adalah kunci bagi saya untuk mendapatkan penyelarasan yang tepat
Louis

50

Tidak yakin tentang bagaimana orang lain memecahkan masalah ini atau apakah Bootstrap memiliki konfigurasi untuk ini.

Saya menemukan utas ini yang memberikan solusi:

https://github.com/twbs/bootstrap/issues/1411

Salah satu postingan menyarankan penggunaan

<ul class="dropdown-menu" style="right: 0; left: auto;">

Saya menguji dan berhasil.

Harapan untuk mengetahui apakah Bootstrap menyediakan konfigurasi untuk melakukan ini, bukan melalui css di atas.

Bersulang.


1
terima kasih, yang ini bekerja untuk dropdown bootstrap 4 di navbar
Petru Lebada

20

Berdasarkan dokumen Bootstrap:

Mulai v3.1.0, .pull-right tidak digunakan lagi di menu drop-down. gunakan .dropdown-menu-right

misalnya:

<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">

1
Saya menguji tarik-kanan dan tarik-kiri di situs web RTL. Mereka bekerja dengan sempurna, tetapi dropdown-menu-right dan dropdown-menu-left tidak.
penasaran1

10

Jika ingin menampilkan menu up, tambahkan saja class "dropup"
dan hapus class "dropdown" jika ada dari div yang sama.

<div class="btn-group dropup">

masukkan deskripsi gambar di sini


1
"Saya berharap posisi pojok kanan atas dropdwon berada di kanan bawah teks" - OP
Joe Czucha

Saya tidak mengerti komentar Anda, maaf !!
Philip Enc

Kelihatannya bagus tapi, bagaimana kita bisa membuatnya otomatis? Seperti saya punya daftar data dan bagian bawahnya tidak yakin.
Santosh

2

Meskipun terlambat, saya harap saya dapat membantu seseorang. Jika menu dropdown atau submenu ada di sisi kanan layar, maka menu atau submenu ada di sisi kiri, jika menu atau submenu ada di kiri, menu atau submenu ada di sisi kanan.

$(".dropdown-toggle").on("click", function(event){//"show.bs.dropdown"
    var liparent=$(this.parentElement);
    var ulChild=liparent.find('ul');
    var xOffset=liparent.offset().left;
    var alignRight=($(document).width()-xOffset)<xOffset;


    if (liparent.hasClass("dropdown-submenu"))
    {
        ulChild.css("left",alignRight?"-101%":"");
    }
    else
    {                
        ulChild.toggleClass("dropdown-menu-right",alignRight);
    }

});

Untuk mendeteksi posisi vertikal Anda juga dapat menambahkan

$( document ).ready(function() {
        var liparent=$(".dropdown");
    var yOffset=liparent.offset().top;
        var toTop=($(document).height()-yOffset)<yOffset;
    liparent.toggleClass("dropup",toTop);
});

https://jsfiddle.net/jd1100/rf9zvdhg/28/


apakah bisa diatur seperti atas dan bawah juga? jika tautan dropdown ada di bagian bawah maka saya ingin membukanya ke arah atas? Bisakah kita mencapai ini?
Santosh

1
Saya telah memperbarui jawaban saya untuk mendeteksi posisi vertikal?
JD11

1

Boostrap memiliki kelas yang disebut navbar-right. Jadi kode Anda akan terlihat seperti berikut:

<ul class="nav navbar-right">
    <li class="dropdown">
      <a class="dropdown-toggle" href="#" data-toggle="dropdown">Link</a>
      <ul class="dropdown-menu">
         <li>...</li>
      </ul>
    </li>
</ul>

0

Jika Anda ingin memusatkan dropdown, inilah solusinya.

<ul class="dropdown-menu" style="right:auto; left: auto;">
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.