下拉式功能表的多種應用方式示例

Bootstrap中下拉式功能表相對于父容器默認是左對齊的，如果想讓下拉式功能表相對于父容器右對齊，則可以在class="dropdown-menu"上添加class="pull-right"或者class="dropdown-menu-right"。當然，在Bootstrap中還提供了另外一個類class="dropdown-menu-left"，這個是讓下拉式功能表居左顯示，

也就是預設形式，下面代碼演示了基本的使用方法：

代碼中使用了網格系統，這是為了更好地對比演示功能表居右顯示的問題，

其中第二個和第三個功能表使用了不同的方式來居右顯示。接下來有一個問題需要特別注意，將網格系統中的class="col-lg-1"改為class="col-lg-3"，代碼如下：

這個時候問題出來了，下拉式功能表的顯示和我們想像的不一樣，明顯錯位了，那麼如何解決這個問題呢？我們需要先瞭解其本質。

下拉式功能表按鈕在class="col-lg-3"中並未完全填充，而class="dropdown-menu"和父容器相關，要解決這個問題我們只需將下拉式功能表的按鈕居右顯示即可，代碼如下：

我們在class="col-lg-3"中添加了類"text-right"，讓容器中的內容居右顯示