如何限制Bootstrap的宽度3下拉菜单在Navbar [英] How To Restrict Width of Bootstrap 3 Dropdown-Menu in Navbar
问题描述
我想阻止Bootstrap .dropdown-menu 从主导航栏（我已经限制为宽度 .container 类）。我想要下拉菜单占用容器类的宽度，但它不应该延伸超过任何一方。
任何想法如何实现这一点，最好使用CSS？
这里有一个例子，和我想它看起来像：
下面是一个带有下拉菜单的锅炉板navbar，它有一个很长的菜单项：
< link rel =stylesheettype =text / csshref =// 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-defaultrole =navigation> <！ - 品牌和切换获得分组，更好的移动显示 - > < div class =navbar-header> < button type =buttonclass =navbar-toggle collapseddata-toggle =collapsedata-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-brandhref =＃> Brand< / a> < / div> <！ - 收集导航链接，表单和其他内容，用于切换 - > < div class =collapse navbar-collapseid =bs-example-navbar-collapse-1> < ul class =nav navbar-nav> < li class =active>< a href =＃>链接< / a>< / li> < li>< a href =＃>链接< / a>< / li> < li class =dropdown> < a href =＃class =dropdown-toggledata-toggle =dropdown>下拉< span class =caret>< / span>< / a> < ul class =dropdown-menurole =menu> < li>< a href =＃>动作< / a>< / li> < li>< a href =＃>另一个操作是一个超长的菜单项，超出了容器的限制，甚至可以扩展到视图端口区域的右边，使得一些文本不可读。< / a>< / li> < li>< a href =＃>这里还有其他内容< / a>< / li> < li class =divider>< / li> < li>< a href =＃>分隔的链接< / a>< / li> < li class =divider>< / li> < li>< a href =＃>一个单独的链接< / a>< / li> < / ul> < / li> < / ul> < / div><！ - /.navbar-collapse - > < / nav>< / div>
说明
Bootstrap的
.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 =stylesheettype = text / csshref =// 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 / javascriptsrc =// 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 =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-collapse> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < / button> < a class =navbar-brandhref =＃> Bootstrap 3 Skeleton< / a> < / div> <！ - Navbar Links - > < div class =collapse navbar-collapse> < ul class =nav navbar-nav> < li class =dropdown> < a href =＃class =dropdown-toggledata-toggle =dropdown>正常< span class =caret>< / span> < / a> < ul class =dropdown-menurole =menu> < li>< a href =＃>动作< / a>< / li> < li>< a href =＃>另一个动作< / a>< / li> < / a>< / li>< / a>< / a>< / a>< ; < li class =divider>< / li> < li>< a href =＃>分隔的链接< / a>< / li> < li class =divider>< / li> < li>< a href =＃>一个单独的链接< / a>< / li> < / ul> < / li> < li class =dropdown full-width> < a href =＃class =dropdown-toggledata-toggle =dropdown>全宽< span class =caret>< / span> < / a> < ul class =dropdown-menurole =menu> < li>< a href =＃>动作< / a>< / li> < li>< a href =＃>另一个动作< / a>< / li> < / a>< / li>< / li>< / a>< < li class =divider>< / li> < li>< a href =＃>分隔的链接< / a>< / li> < li class =divider>< / li> < li>< a href =＃>一个单独的链接< / a>< / li> < / ul> < / li> < li class =dropdown fill-width> < a href =＃class =dropdown-toggledata-toggle =dropdown>填充宽度< span class =caret>< / span> < / a> < ul class =dropdown-menurole =menu> < li>< a href =＃>动作< / a>< / li> < li>< a href =＃>另一个动作< / a>< / li> < / a>< / li>< / li>< / a>< < li class =divider>< / li> < li>< a href =＃>分隔的链接< / a>< / li> < li class =divider>< / li> < li>< a href =＃>一个单独的链接< / a>< / li> < / ul> < / li> < / ul> < / div> < / div>< / div>
I would like to prevent the Bootstrap .dropdown-menu from ever being wider than the main nav bar (which I have restricted to be the width of the .container class). 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.
Any ideas how to accomplish this, preferably using 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>
Explanation
Bootstrap's adds position: absolute to the .dropdown-menu class. 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 .dropdown wrapper
So if you want to position the element relative to the container, and not the nav item, we'll have to remove relative positioning from the .dropdown wrapper. You can do this by resetting the value to the initial value for the position property, which is static.
Congratulations! The menu is no longer constrained by the .dropdown element, but we still have some work to do.
Because bootstrap was not intending to space constrain the menu, menu items are given the property white-space: nowrap so 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.
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 yamm3 is doing something really cool. It sets left: auto on the dropdown-menu.
According to MDN on the left property:
autois a keyword that represents:
for absolutely positioned elements, the position of the element based on therightproperty and treatwidth: autoas a width based on the content.
So setting the .dropdown-menu to left:auto will cause the menu to start in its current location and extend all the way to the right of the container.
Just Codes
Just add the .fill-width class to your .dropdown element and include the following 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>
这篇关于如何限制Bootstrap的宽度3下拉菜单在Navbar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
