带有其他按钮的btn-container中的Bootstrap按钮下拉列表

Question

我在空闲时间创建一个WYSIWYG编辑器。我决定使用下拉列表来允许自己选择格式。问题是，当我添加一个下拉列表时，它不在按钮下面，而是在按钮容器的开头。

这是一张显示我的意思的图片。

第一个按钮看起来是活动的，因为文本左对齐...对不起，我试图找到一种方法来解决这个问题，但是下拉菜单来自最后一个按钮。

我的问题是，有没有办法将Twitter Bootstrap Dropdown与应该打开的按钮对齐，或者至少按下按钮容器的宽度下拉。

Answer 1

是。您可以通过定位或提供课程（例如left: auto; right: 0;）为这里的<ul>添加规则.right-menu：

.right-menu, .dropdown-menu.right-menu {left: auto; right: 0;}

同样的工作演示将在jsFiddle。

Answer 2

在.pull-right上使用.dropdown-menu使其粘贴在容器的右侧并不是一件坏事。

如the source所示，本课程的目的是：

// Aligns the dropdown menu to right
&.pull-right {
  right: 0;
  left: auto;
}

---

如果您希望将其设置为与容器一样大，则可以尝试将其应用于菜单：

.dropdown-menu {
  min-width: 100%;
}

如果你有更大的菜单，你应该保留.pull-right。

检查fiddle demo