Bootstrap: ตำแหน่งของเมนูแบบเลื่อนลงที่สัมพันธ์กับรายการ navbar


109

ฉันมีรายการแบบเลื่อนลงต่อไปนี้

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

มุมซ้ายบนของเมนูแบบเลื่อนลงอยู่ที่มุมล่างซ้ายของข้อความ (Action) แต่ฉันหวังว่าตำแหน่งของมุมขวาบนของดร็อปดาวน์จะอยู่ที่ด้านขวาล่างของข้อความ ฉันจะทำเช่นนั้นได้อย่างไร?

คำตอบ:


230

นี่คือผลกระทบที่เราพยายามบรรลุ:

เมนูจัดชิดขวา

คลาสที่ต้องใช้เปลี่ยนไปด้วยการเปิดตัว Bootstrap 3.1.0 และอีกครั้งด้วยการเปิดตัว Bootstrap 4 หากหนึ่งในโซลูชันด้านล่างดูเหมือนจะไม่ทำงานให้ตรวจสอบหมายเลขเวอร์ชันของ Bootstrap ที่คุณกำลังนำเข้าอีกครั้งแล้วลองใช้อันอื่น

Bootstrap 3

ก่อน v3.1.0

คุณสามารถใช้pull-rightชั้นเรียนเพื่อจัดแถวทางด้านขวามือของเมนูด้วยเครื่องหมายรูปหมวก:

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

ซอ: http://jsfiddle.net/joeczucha/ewzafdju/

หลังจาก v3.1.0

ในเวอร์ชัน 3.1.0 เราได้เลิกใช้งาน. ดึงขวาบนเมนูแบบเลื่อนลง ในการจัดแนวเมนูให้ถูกต้องให้ใช้. dropdown-menu-right คอมโพเนนต์การนำทางที่จัดชิดขวาในแถบนำทางใช้เวอร์ชันมิกซ์อินของคลาสนี้เพื่อจัดแนวเมนูโดยอัตโนมัติ ในการลบล้างให้ใช้. dropdown-menu-left

คุณสามารถใช้dropdown-rightชั้นเรียนเพื่อจัดแถวทางด้านขวามือของเมนูด้วยเครื่องหมายรูปหมวก:

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

ซอ: http://jsfiddle.net/joeczucha/1nrLafxc/

Bootstrap 4

คลาสสำหรับ Bootstrap 4 นั้นเหมือนกับ Bootstrap> 3.1.0 แต่ระวังเพราะส่วนที่เหลือของมาร์กอัปรอบ ๆ มีการเปลี่ยนแปลงเล็กน้อย:

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

ซอ: https://jsfiddle.net/joeczucha/f8h2tLoc/


1
ฉันทดสอบดึงขวาและดึงซ้ายในเว็บไซต์ RTL ทำงานได้อย่างสมบูรณ์แบบ แต่เมนูแบบเลื่อนลง - ขวาและเมนูแบบเลื่อนลง - ซ้ายไม่ได้
curious1

คอนเทนเนอร์ (.dropdown) ต้องมีการแสดง "inline-bock" ในตัวอย่างนี้ LI ใช้ได้ แต่ถ้าเป็น DIV การจัดแนวจะถูกวางไว้ที่ส่วนท้ายขององค์ประกอบบล็อกซึ่งได้รับอิทธิพลจากความกว้างของเมนูย่อย
Nicholas

คลาส "dropdown-menu-right" ใช้เคล็ดลับกับ Bootstrap 4 (เบต้า) เช่นกัน ขอบคุณ! "ดึงขวา" ไม่ทำงาน
Andreas Vogl

การใช้class="dropdown"เป็นกุญแจสำคัญสำหรับฉันในการจัดตำแหน่งที่เหมาะสม
หลุยส์

51

ไม่แน่ใจว่าคนอื่นแก้ปัญหานี้อย่างไรหรือ Bootstrap มีการกำหนดค่าสำหรับสิ่งนี้หรือไม่

ฉันพบชุดข้อความนี้ที่ให้วิธีแก้ไข:

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

หนึ่งในโพสต์แนะนำการใช้

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

ฉันทดสอบแล้วและได้ผล

หวังว่าจะทราบว่า Bootstrap ให้ config สำหรับการทำสิ่งนี้ไม่ใช่ผ่าน css ด้านบน

ไชโย


1
ขอบคุณอันนี้ใช้ได้กับ bootstrap 4 dropdown ใน navbar
Petru Lebada

20

ขึ้นอยู่กับ Bootstrap doc:

ตั้งแต่ v3.1.0, .pull-right จะเลิกใช้งานในเมนูแบบเลื่อนลง ใช้. dropdown-menu-right

เช่น:

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

1
ฉันทดสอบดึงขวาและดึงซ้ายในเว็บไซต์ RTL ทำงานได้อย่างสมบูรณ์แบบ แต่เมนูแบบเลื่อนลง - ขวาและเมนูแบบเลื่อนลง - ซ้ายไม่ได้
curious1

10

หากคุณต้องการแสดงเมนูขึ้นเพียงเพิ่มคลาส "ดร็อปอัพ"
และลบคลาส "ดรอปดาวน์" หากมีอยู่จาก div เดียวกัน

<div class="btn-group dropup">

ป้อนคำอธิบายภาพที่นี่


1
"ฉันหวังว่าตำแหน่งของมุมขวาบนของดรอปวอนจะอยู่ที่ตำแหน่งล่างขวาของข้อความ" - OP
Joe Czucha

ฉันไม่เข้าใจความคิดเห็นของคุณขอโทษ !!
Philip Enc

มันดูดี แต่เราจะทำให้มันอัตโนมัติได้อย่างไร? เช่นฉันมีรายการข้อมูลและส่วนล่างไม่แน่ใจ
Santosh

2

แม้ว่าจะสายไปแล้วฉันหวังว่าฉันจะสามารถช่วยใครสักคนได้ หากเมนูแบบเลื่อนลงหรือเมนูย่อยอยู่ทางด้านขวาของหน้าจอจะเปิดอยู่ทางด้านซ้ายหากเมนูหรือเมนูย่อยอยู่ทางซ้ายจะเปิดอยู่ทางด้านขวา

$(".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);
    }

});

ในการตรวจจับตำแหน่งแนวตั้งคุณยังสามารถเพิ่ม

$( 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/


สามารถปรับได้เหมือนด้านบนและด้านล่างด้วยหรือไม่? หากลิงก์แบบเลื่อนลงอยู่ที่ด้านล่างฉันต้องการเปิดไปทางด้านบนหรือไม่ เราจะบรรลุสิ่งนี้ได้หรือไม่?
Santosh

1
ฉันได้อัปเดตคำตอบของฉันเพื่อตรวจจับตำแหน่งแนวตั้ง?
JD11

1

Boostrap navbar-rightมีระดับที่เรียกว่า ดังนั้นรหัสของคุณจะมีลักษณะดังนี้:

<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

หากคุณต้องการจัดกึ่งกลางรายการแบบเลื่อนลงนี่คือวิธีแก้ปัญหา

<ul class="dropdown-menu" style="right:auto; left: auto;">
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.