Làm thế nào để mở menu con twitter bootstrap ở bên trái?

Tôi đang cố gắng tạo menu con twitter bootstrap trong menu thả xuống, nhưng gặp sự cố: Tôi có menu thả xuống ở góc trên cùng bên phải của trang và menu đó có thêm một menu con. Tuy nhiên, khi menu con mở ra - nó không vừa với cửa sổ và đi quá nhiều sang bên phải, do đó người dùng chỉ có thể nhìn thấy các chữ cái đầu tiên. Làm thế nào để làm cho menu con đó không mở ở bên phải mà ở bên trái?

Cách đơn giản nhất là thêm pull-leftlớp vàodropdown-submenu

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

jsfiddle: DEMO

Nếu tôi hiểu điều này đúng, bootstrap cung cấp một lớp CSS chỉ cho trường hợp này. Thêm 'pull-right' vào menu 'ul':

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

..và kết quả cuối cùng là các tùy chọn menu xuất hiện căn phải, phù hợp với nút mà chúng thả xuống.

Lớp Curent .dropdown-submenu > .dropdown-menucó left: 100%;. Vì vậy, nếu bạn muốn mở menu con ở bên trái, hãy ghi đè các cài đặt đó sang vị trí phủ định bên trái. Ví dụ left: -95%;. Bây giờ bạn sẽ nhận được menu con ở phía bên trái và bạn có thể điều chỉnh các cài đặt khác để có được bản xem trước hoàn hảo.

Đây là DEMO

CHỈNH SỬA: Câu hỏi của OP và câu trả lời của tôi là từ tháng 8 năm 2012. Trong khi đó, Bootstrap đã thay đổi, vì vậy bây giờ bạn có lớp .pull-left. Hồi đó, câu trả lời của tôi là đúng. Bây giờ bạn không phải đặt css theo cách thủ công, bạn có lớp .pull-left đó.

CHỈNH SỬA 2: Các bản trình diễn không hoạt động vì Bootstrap đã thay đổi URL của họ. Chỉ cần thay đổi tài nguyên bên ngoài trong jsfiddle và thay thế chúng bằng tài nguyên mới.

Nếu bạn đang sử dụng bootstrap v4, có một cách mới để làm điều đó.

Bạn nên sử dụng .dropdown-menu-righttrên .dropdown-menuphần tử.

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

Liên kết tới mã: https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-items

Cách chính xác để thực hiện nhiệm vụ là:

/* 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; }

Tôi đã tạo một hàm javascript để xem liệu anh ta có đủ không gian ở phía bên phải không. Nếu nó có, anh ấy sẽ hiển thị nó ở bên phải, nếu không anh ấy sẽ hiển thị nó ở bên trái

Đã thử nghiệm trong:

• Firefox (mac)
• Chorme (mac)
• Safari (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 });
        }
    });
});

bởi vì tôi không muốn thêm bản sửa lỗi này trên mọi mục menu mà tôi đã tạo một lớp mới trên đó. đặt menu cố định trên ul:

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

Tôi hy vọng công trình này ra cho bạn.

ps. lỗi nhỏ trong safari và chrome, lần đầu tiên di chuột sẽ đặt nó sang bên trái sẽ cập nhật bài đăng này nếu tôi đã sửa nó.

Nếu bạn chỉ có một cấp độ và bạn sử dụng bootstrap 3, hãy thêm pull-rightvào ulphần tử

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

Trên thực tế - nếu bạn đồng ý với việc làm nổi dropdowntrình bao bọc - tôi thấy nó dễ dàng như thêm navbar-rightvào dropdown.

Điều này có vẻ giống như gian lận, vì nó không nằm trong thanh điều hướng, nhưng nó hoạt động tốt đối với tôi.

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

Sau đó, bạn có thể tùy chỉnh thêm tính năng nổi với pull-lefttrực tiếp trong dropdown...

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

... hoặc như một lớp bao bọc xung quanh nó ...

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

Nếu bạn đang sử dụng LESS CSS, tôi đã viết một chút mixin để di chuyển menu thả xuống bằng mũi tên kết nối:

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

Sau đó, để di chuyển một .dropdown-menuvới một id là dropdown-menu-xví dụ, bạn có thể làm:

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

Tôi đã tạo một hàm javascript để xem liệu anh ta có đủ không gian ở phía bên phải không. Nếu nó có, anh ta sẽ hiển thị nó ở bên phải, nếu không anh ta sẽ hiển thị nó ở bên trái. Một lần nữa nếu nó có đủ không gian ở bên phải, nó sẽ hiển thị bên phải. nó là một vòng lặp ...

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

}

});

Bạn có đang sử dụng phiên bản bootstrap mới nhất không? Tôi đã điều chỉnh html từ ví dụ Bố cục linh hoạt như được hiển thị bên dưới. Tôi đã thêm một danh sách thả xuống và đặt nó xa nhất về phía bên tay phải bằng cách thêm pull-rightlớp. Khi di chuột qua menu thả xuống, nó sẽ tự động được kéo sang trái và không có gì bị ẩn - tất cả văn bản menu đều hiển thị. Tôi chưa sử dụng bất kỳ css tùy chỉnh nào.

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

Điều duy nhất bạn phải làm là

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

của menu mà bạn muốn hiển thị ở bên RIGHT.