twitter-bootstrap 如何使引导下拉菜单宽度灵活？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35694642/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make bootstrap dropdown menu width to be flexible?
提问by Jand
In Bootstrap 3, I want to put several links in a drop-down menu:
在 Bootstrap 3 中，我想在下拉菜单中放置几个链接：
<li class="dropdown">
<a id="alert" data-toggle="dropdown" class="dropdown-toggle" href="#" title="Notification">Notifications </a>
<ul id="noti" class="dropdown-menu">
{% for t in alerts%}
<li>
<a href="/article/{{t.slug}}">{{t.title}}</a>
</li>
{% endfor %}
</ul>
</li>
The problem is that each link has a different width, so I'm wondering how to define css to wrap even the longest links in the menu?
问题是每个链接都有不同的宽度，所以我想知道如何定义 css 来包装菜单中最长的链接？
回答by Shivani P
I have implement snippet that you can change as per your requirement.Main part is CSS change :
我已经实现了您可以根据您的要求进行更改的代码段。主要部分是 CSS 更改：
.dropdown-menu {
max-width: 180px;
}
.dropdown-menu li a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#" title="HTML">HTML</a></li>
<li><a href="#" title="CSS">CSS</a></li>
<li><a href="#" title="HTML CSS JavaScript bootstrap">HTML CSS JavaScript bootstrap</a></li>
</ul>
</div>
</div>
</body>
</html>回答by milan pandya
Try this one.
试试这个。
<li class="dropdown">
<a id="alert" data-toggle="dropdown" class="dropdown-toggle" href="#" title="Notification">Notifications </a>
<div class="dropdown-menu" style="width: auto;">
<ul id="noti" >
{% for t in alerts%}
<li>
<a href="/article/{{t.slug}}">{{t.title}}</a>
</li>
{% endfor %}
</ul>
</div>
</li>
All I did was put 'div' tag around 'ul'. This one worked for me.
我所做的只是在“ul”周围放置“div”标签。这个对我有用。
回答by Shivani P
Try solution define in following link :
尝试在以下链接中定义解决方案：
