btn容器中帶有其他按鈕的Bootstrap按鈕下拉菜單

Question

我會在業余時間創建一個所見即所得的編輯器。 我決定我想使用下拉菜單來選擇格式。 問題是，當我添加一個下拉列表時，它不是在按鈕下方，而是在按鈕容器的開頭。

這是一張圖片，顯示我的意思。

第一個按鈕似乎處於活動狀態，因為文本向左對齊...對不起，我試圖找到一種解決方法，但是下拉菜單來自最后一個按鈕。

我的問題是，有沒有辦法使Twitter Bootstrap Dropdown與應該被打開的按鈕對齊，或者至少使按鈕容器的寬度與下拉菜單對齊。

Answer 1

是。 您可以只添加一條規則， left: auto; right: 0; left: auto; right: 0; 對於到達此處的<ul> ，通過定位或指定類，例如.right-menu ，可以這樣：

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

jsFiddle中將有一個相同的工作演示。

Answer 2

在.dropdown-menu上使用.pull-right使其.pull-right並不是一件壞事。

從源代碼中可以看出，此類旨在實現以下目的：

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

---

如果您希望使其與容器一樣大，則可以嘗試將其應用於菜單：

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

如果菜單更大，則應保持.pull-right 。

查看小提琴演示