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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 16:22:26  来源:igfitidea点击:

Twitter Bootstrap dropdown menu width

drop-down-menutwitter-bootstrap

提问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 &nbsp as many as you want like

添加任意数量的   空格

&nbsp--View by Category--

 --按类别查看--