Bootstrap navbar bağlantılar genişleyen genişliği beklenmedik

Question

Aşağıdaki navigasyon var:

Ben olsun bir menü öğesi tıkladığınızda aşağıdaki:

sorun olduğunda olmasıdır Menü bağlantısını tıklıyorum. Bağlantı kabı, açılır menünün genişliğini miras alır. Neyse, bunu saf bir css çözümü ile devre dışı bırakabilir miyim?

Bootstrap kullanıyorum 3.4.

Gezinme düşüncem açılır menülerin gezinme bölmesinin yüksekliğini artırması içindir. Açılır menüyü konumuna getirerek: göreli. Üst menü öğesi genişliğini miras alır. Bunu neden yaptığını kafam karıştı. Bunu önlemek için bir yol var mı?

Şimdiden teşekkürler. Daha fazla ayrıntıya ihtiyacınız varsa bana bildirin. İşte

Here is a jsFiddle.

akım biçimlendirme geçerli:

<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

yerine position: relative; eklemek position: absolute; sınıf .dropdown-menu için

ul.dropdown-menu { 
    position: absolute; 
} 

Demo

Answer 2

Bir üst <li> öğeye bir width set eklemeyi deneyin. Bu bir çocuk <ul>

JsFiddle

Answer 3

genişliğini miras tekrarlanmasını önler .. ben bu CSS kullanabilirsiniz söz olarak cevap elde etmek için bu Plunker bakmak güncellenen

kod

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

Bu sorununun çözüleceğini umuyoruz

Answer 4

JQUERY kullanmak isterseniz, bu sizin istediğiniz gibi çalışır.

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

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

BTW Sen o davranmasını istiyorum nasıl Hiç ayarlamak için off-odak yazmak gerekecek.Sadece açılan olayı arasındaki değiştirilirken çapa elemanının genişliğini koruyarak yapabilirsiniz

Answer 5

çağırır:

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

ÖNEMLİ: Bu çözüm yalnızca Önyükleme v3.3.6 için ve o zamandan beri çalıştığını yukarıdan unutmayınız v3.3.5 ve altındaki relatedTarget özelliğinde bir hata oluştu.

Answer 6

Gerekli davranış İşte.

http://jsfiddle.net/vwfe6vh1/

Bahsettiğin herhangi bir noktaya kaçırırsanız bana bildirin.

Neler değiştim? Benim inine bulmak Lütfen

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

Teşekkür

Answer 7

mutlak ve göreli bir kap içinde olan herhangi bir eleman, göreceli kaptan genişliğini miras özellik. O yani, göreceli konteyner genişliği mutlak konteynır için% 100 olacaktır. Varsayılan önyükleme davranışını değiştirebilmenin tek yolu, kapsayıcı konumunu statik olarak değiştirerek ve genişliği aşağı doğru bırakmak istediğiniz kapsayıcıya göre konum vermektir.