如何限制导航栏中 Bootstrap 3 下拉菜单的宽度 [英] How To Restrict Width of Bootstrap 3 Dropdown-Menu in Navbar

问题描述

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

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

以下是它目前的样子以及我希望它的样子的示例:

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

<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="容器"><nav class="navbar navbar-default" role="navigation"><!-- 品牌和切换被分组以获得更好的移动显示--><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">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="#">Brand</a>

<!-- 收集导航链接、表单和其他用于切换的内容--><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="#">链接</a></li><li class="下拉菜单"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a><ul class="dropdown-menu" role="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></div><!--/.navbar-collapse --></nav>

解决方案

说明

Bootstrap 的

.full-width.dropdown {位置:静态；}.full-width.dropdown >.下拉式菜单 {右:0；}.full-width.dropdown >.下拉菜单>立>一个 {空白:正常；}.fill-width.dropdown {位置:静态；}.fill-width.dropdown >.下拉式菜单 {左:自动；}.fill-width.dropdown >.下拉菜单>立>一个 {空白:正常；}

<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="容器"><div class="navbar navbar-inverse"><!-- 标题--><div class="navbar-header"><button type="button" class="navbar-toggle"数据切换=折叠"data-target=".navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="#">Bootstrap 3 骨架</a>

<!-- 导航栏链接--><div class="collapse navbar-collapse"><ul class="nav navbar-nav"><li class="下拉菜单"><a href="#" class="dropdown-toggle"数据切换=下拉">正常 <span class="caret"></span></a><ul class="dropdown-menu" role="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><li class="下拉全宽"><a href="#" class="dropdown-toggle"数据切换=下拉">全宽<span class="caret"></span></a><ul class="dropdown-menu" role="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>

<a href="#" class="dropdown-toggle"数据切换=下拉">填充宽度<span class="caret"></span></a><ul class="dropdown-menu" role="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>