Drop down menu Twitter引导下拉菜单宽度

Drop down menu Twitter引导下拉菜单宽度,drop-down-menu,twitter-bootstrap,Drop Down Menu,Twitter Bootstrap,以下是我的目标: 以下是我的方法的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,

以下是我的目标:

以下是我的方法的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;
}}
现在看起来:


一切都很好,除了我似乎无法获得下拉菜单文本的正确宽度(我需要根据文本缩小宽度)。那么我该怎么做呢?

尝试从.dropdown menu.sub menu类中删除填充

.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
  padding: 0;
}

您必须删除
下拉菜单
列表的
最小宽度
属性。在之后包括以下,包括引导:

.dropdown-menu {
  min-width: 0px;
}

或者,对于您给定的确切样式,您可以改为使用

好的,您可以在内部文本中添加空格,它将自动增加其宽度,例如 “--按类别查看--”

添加任意数量的空间


 --按类别查看--

@用户您可以将代码放入JSBin或JSFIDLE中,以便我们更好地查看吗?