Bootstrap liên kết navbar chiều rộng mở rộng bất ngờ

Question

Tôi có điều hướng sau:

Khi tôi bấm vào một mục trình đơn tôi nhận được như sau:

Vấn đề là khi Tôi nhấp vào liên kết menu. Vùng chứa liên kết kế thừa chiều rộng của trình đơn thả xuống. Có anyway tôi có thể vô hiệu hóa điều này với một giải pháp css tinh khiết?

Tôi đang sử dụng bootstrap 3.4.

Ý tưởng điều hướng của tôi là dành cho trình đơn thả xuống để tăng chiều cao của div điều hướng. Bằng cách đặt menu thả xuống thành vị trí: tương đối. Mục menu cha kế thừa chiều rộng của nó. Tôi bối rối vì sao nó lại làm vậy. Có cách nào để ngăn chặn điều này?

Xin cảm ơn trước. Hãy cho tôi biết nếu bạn cần thêm bất kỳ chi tiết nào.

Here is a jsFiddle.

Dưới đây là đánh dấu hiện tại:

<ul class="nav navbar-nav navbar-right"> 
     <li class="first expanded dropdown menu-4929 active"><a href="/" title="" data-target="#" class="dropdown-toggle menu-4929 active" data-toggle="dropdown">About Us</a> 
      <ul class="dropdown-menu dropdown-menu-left"> 
       <li class="first leaf menu-4936 active"><a href="/" title="" class="menu-4936 active">The Museum</a></li> 
       <li class="leaf menu-4937 active"><a href="/" title="" class="menu-4937 active">The Design</a></li> 
       <li class="leaf menu-4938 active"><a href="/" title="" class="menu-4938 active">Our Team</a></li> 
       <li class="last leaf menu-4939 active"><a href="/" title="" class="menu-4939 active">Work Opportunities</a></li> 
      </ul> 
     </li> 
     <li class="expanded dropdown menu-4930"><a href="/the-collection" title="" data-target="#" class="dropdown-toggle menu-4930" data-toggle="dropdown">Collection</a> 
      <ul class="dropdown-menu dropdown-menu-left"> 
       <li class="first leaf menu-4943 active"><a href="/" title="" class="menu-4943 active">Steam Launches</a></li> 
       <li class="leaf menu-4942 active"><a href="/" title="" class="menu-4942 active">Sailing Boats</a></li> 
       <li class="leaf menu-4941 active"><a href="/" title="" class="menu-4941 active">Motorboats</a></li> 
       <li class="leaf menu-4940 active"><a href="/" title="" class="menu-4940 active">Racing Boats</a></li> 
       <li class="leaf menu-4944 active"><a href="/" title="" class="menu-4944 active">Other Boats</a></li> 
       <li class="last leaf menu-4945 active"><a href="/" title="" class="menu-4945 active">Conservation</a></li> 
      </ul> 
     </li> 
     <li class="expanded dropdown menu-4931"><a href="/collection" title="" data-target="#" class="dropdown-toggle menu-4931" data-toggle="dropdown">What's On</a> 
      <ul class="dropdown-menu dropdown-menu-left"> 
       <li class="first leaf menu-4946 active"><a href="/" title="" class="menu-4946 active">Today</a></li> 
       <li class="leaf menu-4947 active"><a href="/" title="" class="menu-4947 active">Next 7 Days</a></li> 
       <li class="last leaf menu-4948 active"><a href="/" title="" class="menu-4948 active">Next 30 Days</a></li> 
      </ul> 
     </li> 
     <li class="expanded dropdown menu-4932 active"><a href="/" title="" data-target="#" class="dropdown-toggle menu-4932 active" data-toggle="dropdown">Support us</a> 
      <ul class="dropdown-menu dropdown-menu-left"> 
       <li class="first leaf menu-4949 active"><a href="/" title="" class="menu-4949 active">Build the Museum</a></li> 
       <li class="leaf menu-4950 active"><a href="/" title="" class="menu-4950 active">The Jetty Appeal</a></li> 
       <li class="last leaf menu-4951 active"><a href="/" title="" class="menu-4951 active">One Million for the Museum</a></li> 
      </ul> 
     </li> 
     <li class="leaf menu-4933 active"><a href="/" title="" class="menu-4933 active">News</a></li> 
     <li class="leaf menu-4934 active"><a href="/" title="" class="menu-4934 active">Blog</a></li> 
     <li class="last leaf menu-4935 active"><a href="/" class="menu-4935 active"><span class="icons-search"></span><span class="icons-search-red"></span>Search</a></li> 
    </ul> 

Answer 1

Thay vì position: relative; thêm position: absolute;-.dropdown-menu lớp

ul.dropdown-menu { 
    position: absolute; 
} 

Demo

Answer 2

Thử thêm một bộ width vào phần tử cha mẹ <li>. Điều này sẽ ngăn chặn nó kế thừa chiều rộng của một đứa trẻ <ul>

JsFiddle

Answer 3

.. i cập nhật câu trả lời hãy xem này Plunker để đạt được như bạn đề cập đến sử dụng css này

mã

.dropdown-menu { 
    position: relative; 
z-index: 1000; 
} 

.nav .open > a, .nav .open > a:hover, .nav .open > a:focus{width:120px;margin-left:0px;} 

.test{width:115px;} 

hy vọng điều này sẽ giải quyết được sự cố của bạn

Answer 4

Nếu bạn muốn sử dụng JQUERY công trình này như bạn muốn.

http://jsfiddle.net/Dhanck/sgwpLx5v/10/

$('.expanded').click(function(event) { 
event.preventDefault(); 
$('.dropdown-menu-left').css('position', 'absolute'); 
console.log('position absolute'); 
setTimeout(function(){ 
console.log('menu clicked'); 
//Get the height of the UL nested and add the size of nav + the bottom margin 
var navheight = $('.open .dropdown-menu-left').height() + 52 + 20; 
console.log(navheight); 

$('.navbar').height(navheight); 
console.log('set height'); 

}, 0) 
}); 

BTW Bạn sẽ phải viết của bạn tắt lấy nét để thiết lập nó như thế nào bao giờ bạn muốn nó để hành xử.

Answer 5

Bạn chỉ có thể làm điều này bằng cách duy trì độ rộng của phần tử toggling neo giữa sự kiện thả xuống gọi:

$(document).ready(function() { 
    var anchorWidth = 0 
    $('.dropdown').on('show.bs.dropdown', function (e) { 
    // e.relatedTarget is the toggling anchor element 
    anchorWidth = $(e.relatedTarget).width() 
    }) 
    $('.dropdown').on('shown.bs.dropdown', function (e) { 
    $(e.relatedTarget).width(anchorWidth) 
    }) 
}); 

QUAN TRỌNG: Xin lưu ý rằng giải pháp này chỉ hoạt động cho Bootstrap v3.3.6 trở lên kể từ khi đã có lỗi trong thuộc tính relatedTarget trong v3.3.5 trở xuống.

Answer 6

Đây là hành vi bắt buộc.

http://jsfiddle.net/vwfe6vh1/

Hãy cho tôi biết nếu tôi bỏ lỡ bất kỳ điểm nào bạn đã đề cập.

Điều gì tôi đã thay đổi? Xin vui lòng tìm trong inine tôi bình luận

ul.dropdown-menu { 
 
    
 
    /* Position Relative always respect its parent */ 
 
    position: absolute; 
 
    
 
    /* If not Auto Horizontal scrollbar will come up */ 
 
    overflow-x: auto; 
 
    
 
    /* If not Auto menu items will cropped if overflow-x set as hidden */ 
 
    width: auto; 
 
    
 
    /* No change*/ 
 
    height: auto; 
 
    margin: 0; 
 
    border: none; 
 
    -webkit-border-radius: 0 !important; 
 
    -moz-border-radius: 0 !important; 
 
    -ms-border-radius: 0 !important; 
 
    -o-border-radius: 0 !important; 
 
    border-radius: 0 !important; 
 
    -webkit-box-shadow: none; 
 
    -moz-box-shadow: none; 
 
    -ms-box-shadow: none; 
 
    -o-box-shadow: none; 
 
    box-shadow: none; 
 
    
 
    /* To remove space above each drop down*/ 
 
    padding-top:0; 
 
}

Thankyou

Answer 7

Bất kỳ yếu tố đó là tuyệt đối và trong một container tương đối, sẽ kế thừa chiều rộng của nó từ container tương đối. nghĩa là chiều rộng vùng chứa tương đối sẽ là 100% cho vùng chứa tuyệt đối. Cách duy nhất bạn có thể thay đổi hành vi bootstrap mặc định là bằng cách thay đổi vị trí vùng chứa thành tĩnh và cho vị trí tương đối với vùng chứa có chiều rộng bạn muốn kế thừa cho trình đơn thả xuống.