Bootstrap 导航栏链接宽度意外扩展

Question

我有以下导航：

当我点击一个菜单项时，我得到以下信息：

问题是当我单击菜单链接时。链接容器继承下拉菜单的宽度。无论如何我可以使用纯 css 解决方案禁用它吗？

我正在使用引导程序 3.4。

我的导航的想法是让下拉菜单增加导航 div 的高度。通过将下拉菜单设置为位置：相对。父菜单项继承它的宽度。我很困惑为什么它会这样做。有没有办法防止这种情况发生？

提前致谢。如果您需要更多详细信息，请告诉我。

Here is a jsFiddle.

这是当前的标记：

<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

代替position: relative; 将position: absolute; 添加到.dropdown-menu 类

ul.dropdown-menu {
  position: absolute;
}

Demo

Answer 2

尝试将一组 width 添加到您的父 <li> 元素。这应该可以防止它继承子 <ul>

的宽度

JsFiddle

Answer 3

.. 我更新了答案看看这个 Plunker 来实现你提到的使用这个 css

代码

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

希望这能解决你的问题

Answer 4

如果你想使用 JQUERY，这就像你想要的那样工作。

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

顺便说一句，你必须写下你的离焦来设置它你希望它的行为方式。

Answer 5

您可以通过在下拉事件调用之间保留切换锚元素的宽度来简单地做到这一点：

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

重要提示：请注意，此解决方案仅适用于 Bootstrap v3.3.6 及更高版本，因为在 v3.3.5 及更低版本的 relatedTarget 属性中存在错误。

Answer 6

这是必需的行为。

http://jsfiddle.net/vwfe6vh1/

如果我遗漏了您提到的任何一点，请告诉我。

我改变了什么？请在我的 inine cmets 中查找

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

谢谢

Answer 7

任何在相对容器内的绝对元素，都会从相对容器继承其宽度。即相对容器宽度将是绝对容器的 100%。更改默认引导行为的唯一方法是将容器位置更改为静态，并提供相对于您要为下拉菜单继承其宽度的容器的位置。