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

Posted 2023-03-05

【中文标题】Bootstrap 导航栏链接宽度意外扩展

【英文标题】：Bootstrap navbar links width expanding unexpectedly

【发布时间】：2016-05-01 17:16:26

【问题描述】：

我有以下导航：

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

问题是当我单击菜单链接时。链接容器继承下拉菜单的宽度。无论如何我可以使用纯 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>

【问题讨论】：

我知道了，请查看更新后的Plunker

【参考方案1】：

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

ul.dropdown-menu 
  position: absolute;

Demo

【讨论】：

您好，感谢您的回答。但我希望下拉菜单是相对的。展开导航容器。绝对的问题是我的下拉菜单与我不想要的主体内容重叠。

@cwiggo 您可以通过在与导航栏重叠的元素上声明较低的 z-index 值来解决此问题。

【参考方案2】：

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

的宽度

JsFiddle

【讨论】：

宽度可以变化。我认为这不足以成为解决方案。

【参考方案3】：

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

代码

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


.nav .open > a, .nav .open > a:hover, .nav .open > a:focuswidth:120px;margin-left:0px;

.testwidth:115px;

希望这能解决你的问题

【讨论】：

感谢您的回答，但我需要父链接大小相同。在您的实施中。它们扩展到下拉宽度，这不是我想要的解决方案。

我没有看到任何变化。主链接的宽度仍会扩展到其下拉菜单的大小。

点击时父类和下拉菜单改变了？

你的实现是正确的，但菜单项的宽度不应该改变。但你的实现确实如此。

【参考方案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)
);

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

【参考方案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 属性中存在错误。

【参考方案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;

谢谢

【讨论】：

这是您想要实现的扩展版本。请注意，这没有任何平滑效果。 jsfiddle.net/1v0qrcff

【参考方案7】：

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