twitter-bootstrap Twitter Bootstrap 下拉菜单宽度
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/14881906/
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
Twitter Bootstrap dropdown menu width
提问by Abdulrahman AlQallaf
Here is what i aim to do: https://docs.google.com/file/d/0B13W1jkpc_BzLXZ6RGxGbUd2NG8/edit?usp=sharing
这是我的目标:https: //docs.google.com/file/d/0B13W1jkpc_BzLXZ6RGxGbUd2NG8/edit?usp=sharing
Here is the CSS for my approach:
这是我的方法的 CSS:
@media (min-width: 980px) {
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
a.menu:after, .dropdown-toggle:after {
content: none;
}
.navbar .dropdown-menu {
margin-top: 0px;
text-align: center;
}}
And the way it looks now: https://docs.google.com/file/d/0B13W1jkpc_BzZUlRck5VcWh0TkE/edit?usp=sharing
现在的样子:https: //docs.google.com/file/d/0B13W1jkpc_BzZUlRck5VcWh0TkE/edit?usp=sharing
Everything is working fine except that i can't seem to get the right width for the dropdown menu's text (i need to shrink the width according to text). So how do i do that ?
一切正常,除了我似乎无法为下拉菜单的文本获得正确的宽度(我需要根据文本缩小宽度)。那我该怎么做呢?
回答by Sinan Taifour
You have to remove the min-widthproperty of the .dropdown-menulist. Including the following afteryou include bootstrap:
您必须删除列表的min-width属性.dropdown-menu。在包含 bootstrap之后包括以下内容:
.dropdown-menu {
min-width: 0px;
}
Alternatively, for the exact style you have given, you could use bootstrap's tooltipsinstead
另外,对于确切的风格,你给了,你可以使用引导程序的提示,而不是
回答by OliverP
Try removing padding from the .dropdown-menu .sub-menu classes.
尝试从 .dropdown-menu .sub-menu 类中删除填充。
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
padding: 0;
}
回答by Faqeer ur Rehman
Well you can add space to your inner text and it will automatically increase its width e.g you have "--View by Category--"
好吧,您可以为内部文本添加空间,它会自动增加其宽度,例如您有“--按类别查看--”
Add spaces with   as many as you want like
添加任意数量的 空格
 --View by Category--
--按类别查看--

