Question

我有以下导航：

当我点击菜单项时，我得到以下内容：

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

我正在使用bootstrap 3.4。

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

提前致谢。如果您需要更多详细信息，请与我们联系。

这是当前的标记：

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

BTW你必须写下你的焦点来设置你想要它的行为方式。

Answer 5

您可以通过在下拉事件调用之间保留切换锚元素的宽度来执行此操作：

<properties>
    <properties>
    <junit.version>4.11</junit.version>
    <selenium.version>2.50.1</selenium.version>
    <cucumber.version>1.2.0</cucumber.version>
</properties>


<dependencies>
    <dependency>
        <groupId>junit</groupId>
        <artifactId>junit</artifactId>
        <version>${junit.version}</version>
        <scope>test</scope>
    </dependency>
    <dependency>
        <groupId>info.cukes</groupId>
        <artifactId>cucumber-java</artifactId>
        <version>${cucumber.version}</version>
        <scope>test</scope>
    </dependency>
    <dependency>
        <groupId>info.cukes</groupId>
        <artifactId>cucumber-junit</artifactId>
        <version>${cucumber.version}</version>
        <scope>test</scope>
    </dependency>
</dependencies>

重要：请注意，此解决方案仅适用于Bootstrap v3.3.6及更高版本，因为v3.3.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) }) });属性存在错误。

Answer 6

这是必需的行为。

http://jsfiddle.net/vwfe6vh1/

如果我错过了你提到的任何一点，请告诉我。

我改变了什么？请在我的评论中找到

＆＃13;

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

＆＃13;

三江源

Answer 7

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

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

7 个答案: