Question

我想阻止Bootstrap .dropdown-menu比主导航栏更广泛（我将其限制为.container类的宽度）。我希望下拉菜单占用容器类的宽度，但它不应超出任何一方的宽度。

任何想法如何实现这一点，最好使用CSS？

以下是目前的样子以及我喜欢它的样子： screenshot

这是一个带有下拉菜单的锅炉板导航栏，其中有一个非常长的菜单项：

＆＃13;

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div class="container">
  <nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action a really long menu item that extends way beyond the limits of "container" and may even extend beyond the view port area to the right, making some of the text unreadable.</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </nav>
</div>

＆＃13;

Answer 1

说明

Bootstrap的adds position: absolute到.dropdown-menu级。 As you may know，所有绝对定位的元素都与他们使用position: relative找到的第一个父元素相关联。在Bootstrap中，这由.dropdown wrapper

提供

因此，如果您想要相对于容器而不是导航项定位元素，我们必须从.dropdown包装器中remove relative positioning。您可以通过将值重置为initial value for the position property static来执行此操作。

恭喜！菜单不再受.dropdown元素的限制，但我们还有一些工作要做。

因为bootstrap不打算对空间进行限制，所以菜单项被赋予属性white-space: nowrap，因此只要需要它们就会延长。在堆栈溢出（1行= 1行）上考虑代码块内部的代码行。既然我们希望这条线最终结束，那就不行了。因此，我们会将锚标记重置为white-space: normal。

此时.dropdown菜单应该占用.navbar的全部大小（它本身占用.container的完整大小）。这是yamm3正在做一些非常酷的事情。它sets left: auto on the dropdown-menu。

根据MDN on the left property：

auto 是表示以下内容的关键字：
对于绝对定位的元素，元素的位置基于right属性，并根据内容将width: auto视为宽度。

因此，将.dropdown-menu设置为left:auto会导致菜单从当前位置开始，并一直延伸到容器的右侧。

Just Codes

只需将.fill-width类添加到.dropdown元素并添加以下CSS：

.fill-width.dropdown {
    position: static;
}
.fill-width.dropdown > .dropdown-menu {
    left: auto;
}
.fill-width.dropdown > .dropdown-menu > li > a {
   white-space: normal; 
}

Working Demo in jsFiddle

.full-width.dropdown {
    position: static;
}
.full-width.dropdown > .dropdown-menu {
    right: 0;
}
.full-width.dropdown > .dropdown-menu > li > a {
   white-space: normal; 
}


.fill-width.dropdown {
    position: static;
}
.fill-width.dropdown > .dropdown-menu {
    left: auto;
}
.fill-width.dropdown > .dropdown-menu > li > a {
   white-space: normal; 
}

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<div class="container">
    <div class="navbar navbar-inverse">

        <!-- Header -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" 
                    data-toggle="collapse" 
                    data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                Bootstrap 3 Skeleton
            </a>
        </div>
        <!-- Navbar Links -->
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" 
                    data-toggle="dropdown">
                        Normal <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
                            </a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>   
                <li class="dropdown full-width">
                    <a href="#" class="dropdown-toggle" 
                    data-toggle="dropdown">
                        Full Width <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
                            </a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>          
                <li class="dropdown fill-width">
                    <a href="#" class="dropdown-toggle" 
                    data-toggle="dropdown">
                        Fill Width <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
                            </a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>   
            </ul>
        </div>
    </div>
</div>

如何限制Navbar中Bootstrap 3下拉菜单的宽度

1 个答案:

说明

Just Codes

Working Demo in jsFiddle