twitter-bootstrap 如何限制导航栏中 Bootstrap 3 下拉菜单的宽度

How To Restrict Width of Bootstrap 3 Dropdown-Menu in Navbar

提问by mike.bronner

I would like to prevent the Bootstrap .dropdown-menufrom ever being wider than the main nav bar (which I have restricted to be the width of the .containerclass). I'd like for the dropdown menu to take up the width of the container class, but it shouldn't extend beyond that on either side.

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

Any ideas how to accomplish this, preferably using CSS?

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

Here's an example of what it currently looks like and what I'd like it to look like:

这是它目前的样子以及我希望它的样子的一个例子：

Here's a boiler plate navbar with a dropdown menu that has one really long menu item:

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

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

回答by KyleMit

Explanation

解释

Bootstrap's adds position: absoluteto the .dropdown-menuclass. As you may know, all absolutely positioned elements are positioned in relation to the first parent element they find with position: relative. In Bootstrap, this is provided by the .dropdownwrapper

Bootstrap添加position: absolute到.dropdown-menu类中。 您可能知道，所有绝对定位的元素都相对于它们找到的第一个父元素进行定位position: relative。在 Bootstrap 中，这是由包装器提供的.dropdown

So if you want to position the element relative to the container, and not the nav item, we'll have to remove relative positioningfrom the .dropdownwrapper. You can do this by resetting the value to the initial value for the positionproperty, which is static.

因此，如果您想相对于容器而不是导航项定位元素，我们必须从包装器中删除相对定位.dropdown。您可以通过将值重置为position属性的初始值（即static.

Congratulations! The menu is no longer constrained by the .dropdownelement, but we still have some work to do.

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

Because bootstrap was not intending to space constrain the menu, menu items are given the property white-space: nowrapso they'll extend as long as they need. Think lines of code inside code blocks here on stack overflow (1 line = 1 line). Since we want the line to eventually end, this won't do. So we'll reset the anchor tags back to white-space: normal.

因为引导程序不打算空间限制菜单，菜单项被赋予了属性，white-space: nowrap所以它们会根据需要进行扩展。考虑堆栈溢出时代码块内的代码行（1 行 = 1 行）。因为我们希望这条线最终结束，所以这是行不通的。所以我们将把锚标签重置回white-space: normal.

At this point the .dropdown-menu should take up the full size of the .navbar (which itself takes up the full size of the .container). This is where yamm3is doing something really cool. It sets left: autoon the dropdown-menu.

此时 .dropdown-menu 应该占据 .navbar 的完整大小（它本身占据 .navbar 的完整大小.container）。这就是yamm3做一些非常酷的事情的地方。它设置left: auto在下拉菜单上。

According to MDN on the left property:

根据左侧属性的 MDN：

autois a keyword that represents:
for absolutely positionedelements, the position of the element based on the rightproperty and treat width: autoas a width based on the content.

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

So setting the .dropdown-menuto left:autowill cause the menu to start in its current location and extend all the way to the right of the container.

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

Just Codes

只是代码

Just add the .fill-widthclass to your .dropdownelement and include the following CSS:

只需将该.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

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>