จะทำให้เมนูย่อยของ twitter bootstrap เปิดทางด้านซ้ายได้อย่างไร?

ฉันพยายามสร้างเมนูย่อยของ twitter bootstrap ในเมนูแบบเลื่อนลง แต่ฉันมีปัญหา: ฉันมีเมนูแบบเลื่อนลงที่มุมขวาบนของหน้าและเมนูนั้นมีเมนูย่อยอีกหนึ่งเมนู อย่างไรก็ตามเมื่อเมนูย่อยเปิดขึ้น - จะไม่พอดีกับหน้าต่างและไปทางขวามากเกินไปผู้ใช้จะเห็นเฉพาะตัวอักษรตัวแรกเท่านั้น จะทำอย่างไรให้เมนูย่อยไม่เปิดไปทางขวา แต่ไปทางซ้าย?

วิธีที่ง่ายที่สุดคือเพิ่มpull-leftชั้นเรียนลงในไฟล์dropdown-submenu

<li class="dropdown-submenu pull-left">

jsfiddle: สาธิต

ถ้าฉันเข้าใจถูกต้องแล้ว bootstrap จะมีคลาส CSS สำหรับกรณีนี้ เพิ่ม 'pull-right' ในเมนู 'ul':

<ul class="dropdown-menu pull-right">

.. และผลลัพธ์สุดท้ายคือตัวเลือกเมนูจะปรากฏขึ้นในแนวขวาโดยสอดคล้องกับปุ่มที่เลื่อนลงมา

ระดับ Curent มี.dropdown-submenu > .dropdown-menu left: 100%;ดังนั้นหากคุณต้องการเปิดเมนูย่อยทางด้านซ้ายให้แทนที่การตั้งค่าเหล่านั้นไปยังตำแหน่งด้านซ้ายที่เป็นลบ ตัวอย่างเช่นleft: -95%;. ตอนนี้คุณจะได้รับเมนูย่อยทางด้านซ้ายและคุณสามารถปรับแต่งการตั้งค่าอื่น ๆ เพื่อดูตัวอย่างที่สมบูรณ์แบบ

นี่คือการสาธิต

แก้ไข: คำถามของ OP และคำตอบของฉันมาจากเดือนสิงหาคม 2012 ในขณะเดียวกัน Bootstrap ก็เปลี่ยนไปดังนั้นตอนนี้คุณมีคลาส. ดึงซ้าย ในตอนนั้นคำตอบของฉันถูกต้อง ตอนนี้คุณไม่จำเป็นต้องตั้งค่า css ด้วยตนเองคุณมีคลาส. ดึงซ้าย

แก้ไข 2: การสาธิตไม่ทำงานเนื่องจาก Bootstrap เปลี่ยน URL ของพวกเขา เพียงแค่เปลี่ยนทรัพยากรภายนอกใน jsfiddle และแทนที่ด้วยทรัพยากรใหม่

หากคุณใช้ bootstrap v4 มีวิธีใหม่ในการทำเช่นนั้น

คุณควรใช้.dropdown-menu-rightกับ.dropdown-menuองค์ประกอบ

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

เชื่อมโยงกับรหัส: https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-items

วิธีที่ถูกต้องในการทำงานคือ:

/* Submenu placement itself */
.dropdown-submenu > .dropdown-menu { left: auto; right: 100%; }
/* Arrow position */
.dropdown-submenu { position: relative; }
.dropdown-submenu > a:after { position: absolute; left: 7px; top: 3px; float: none; border-right-color: #cccccc; border-width: 5px 5px 5px 0; }
.dropdown-submenu:hover > a:after { border-right-color: #ffffff; }

ฉันได้สร้างฟังก์ชันจาวาสคริปต์ที่ดูว่าเขามีที่ว่างทางด้านขวาเพียงพอหรือไม่ ถ้ามีเขาจะแสดงทางด้านขวามิฉะนั้นเขาจะแสดงทางด้านซ้าย

ผ่านการทดสอบใน:

• Firefox (Mac)
• Chorme (แม็ค)
• ซาฟารี (Mac)

Javascript:

$(document).ready(function(){
    //little fix for the poisition.
    var newPos     = $(".fixed-menuprofile .dropdown-submenu").offset().left - $(this).width();
    $(".fixed-menuprofile .dropdown-submenu").find('ul').offset({ "left": newPos });

    $(".fixed-menu .dropdown-submenu").mouseover(function() {
        var submenuPos = $(this).offset().left + 325;
        var windowPos  = $(window).width();
        var oldPos     = $(this).offset().left + $(this).width();
        var newPos     = $(this).offset().left - $(this).width();

        if( submenuPos > windowPos ){
            $(this).find('ul').offset({ "left": newPos });
        } else {
            $(this).find('ul').offset({ "left": oldPos });
        }
    });
});

เพราะฉันไม่ต้องการเพิ่มการแก้ไขนี้ในทุกรายการเมนูที่ฉันสร้างคลาสใหม่ขึ้นมา วางเมนูคงที่บน ul:

<ul class="dropdown-menu fixed-menu">

ฉันหวังว่าสิ่งนี้จะได้ผลสำหรับคุณ

ปล. ข้อผิดพลาดเล็ก ๆ น้อย ๆ ในซาฟารีและโครเมี่ยมการวางเมาส์ครั้งแรกจะวางไว้ที่ด้านซ้ายจะอัปเดตโพสต์นี้หากฉันแก้ไข

หากคุณมีเพียงระดับเดียวและคุณใช้ bootstrap 3 เพิ่มpull-rightในulองค์ประกอบ

<ul class="dropdown-menu pull-right" role="menu">

อันที่จริง - ถ้าคุณพอใจกับการลอยdropdownกระดาษห่อ - ฉันพบว่ามันง่ายพอ ๆ กับการเพิ่มnavbar-rightไฟล์dropdown .

ดูเหมือนว่าจะเป็นการโกงเนื่องจากไม่ได้อยู่ในแถบนำทาง แต่ก็ใช้ได้ดีสำหรับฉัน

<div class="dropdown navbar-right">
...
</div>

จากนั้นคุณสามารถปรับแต่งลอยเพิ่มเติมpull-leftได้โดยตรงในdropdown...

<div class="dropdown pull-left navbar-right">
...
</div>

... หรือเป็นห่อหุ้มมัน ...

<div class="pull-left">
  <div class="dropdown navbar-right">
  ...
  </div>
</div>

หากคุณใช้ LESS CSS ฉันเขียนมิกซ์อินเล็กน้อยเพื่อเลื่อนเมนูแบบเลื่อนลงด้วยลูกศรเชื่อมต่อ:

.dropdown-menu-shift( @num-pixels, @arrow-position: 10px ) {  // mixin to shift the dropdown menu
    left: @num-pixels;
    &:before { left: -@num-pixels + @arrow-position; }        // triangle outline
    &:after  { left: -@num-pixels + @arrow-position + 1px; }  // triangle internal
}

จากนั้นในการย้าย.dropdown-menuด้วย id dropdown-menu-xตัวอย่างเช่นคุณสามารถทำได้:

#dropdown-menu-x {
    .dropdown-menu-shift( -100px );
}

ฉันได้สร้างฟังก์ชันจาวาสคริปต์ที่ดูว่าเขามีที่ว่างทางด้านขวาเพียงพอหรือไม่ ถ้ามีเขาจะแสดงทางด้านขวามิฉะนั้นเขาจะแสดงทางด้านซ้าย อีกครั้งหากมีพื้นที่เพียงพอทางด้านขวาก็จะแสดงด้านขวา มันวน ...

$(document).ready(function () {

$('body, html').css('overflow', 'hidden');
var screenWidth = $(window).width();
$('body, html').css('overflow', 'visible');

if (screenWidth > 767) {

    $(".dropdown-submenu").hover(function () {

        var dropdownPosition = $(this).offset().left + $(this).width() + $(this).find('ul').width();
        var newPosition = $(this).offset().left - $(this).find('ul').width();
        var windowPosition = $(window).width();

        var oldPosition = $(this).offset().left + $(this).width();
        //document.title = dropdownPosition;
        if (dropdownPosition > windowPosition) {
            $(this).find('ul').offset({ "left": newPosition });
        } else {
            $(this).find('ul').offset({ "left": oldPosition });
        }
    });

}

});

คุณใช้ bootstrap เวอร์ชันล่าสุดหรือไม่? ฉันได้ปรับ html จากตัวอย่าง Fluid Layoutดังที่แสดงด้านล่าง ฉันเพิ่มรายการแบบเลื่อนลงและวางไว้ให้ไกลที่สุดทางด้านขวามือโดยเพิ่มpull-rightชั้นเรียน เมื่อวางเมาส์เหนือเมนูแบบเลื่อนลงระบบจะดึงไปทางซ้ายโดยอัตโนมัติและไม่มีสิ่งใดซ่อนอยู่ - ข้อความเมนูทั้งหมดจะปรากฏให้เห็น ฉันไม่ได้ใช้ css ที่กำหนดเองใด ๆ

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse collapse">
        <ul class="nav pull-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
          <li class="dropdown open">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <p class="navbar-text pull-right">
          Logged in as <a href="#" class="navbar-link">Username</a>
        </p>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

สิ่งเดียวที่คุณต้องทำคือ

 <ul style='left:-100%'> 

ของเมนูที่คุณต้องการแสดงทางด้านขวา