Twitter Bootstrap下拉菜单宽度

Question

我将要做的事情是：在这里：https://docs.google.com/file/d/0B13W1jkpc_BzLXZ6RGxGbUd2NG8/edit?usp=sharing 以下是我方法的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;
}}

现在看起来是这样的：https://docs.google.com/file/d/0B13W1jkpc_BzZUlRck5VcWh0TkE/edit?usp=sharing 一切都正常工作，只是我似乎无法获得下拉菜单文本的正确宽度（我需要根据文本缩小宽度）。 那么我该怎么做？

- Abdulrahman AlQallaf

Answer 1

在包含Bootstrap后，您需要移除 .dropdown-menu 列表的 min-width 属性。具体请参考以下内容：

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

或者，为了达到你所要求的确切样式，你可以使用Bootstrap的工具提示

- Sinan Taifour

Answer 2

尝试从.dropdown-menu .sub-menu类中移除填充。

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

- OliverP

---

@user 你能否把你的代码放在JSBin或JSFiddle上，这样我们可以更好地查看吗？ - OliverP

Answer 3

你可以在文本中添加空格，它会自动增加宽度，例如你有"--按类别查看--"

使用 &nbsp 添加尽可能多的空格，如

&nbsp--按类别查看--

- Faqeer ur Rehman