下拉菜单的多种应用方式示例

1、Bootstrap中下拉菜单相对于父容器默认是左对齐的，如果想让下拉菜单相对于父容器右对齐，则可以在class="dropdown-menu"上添加class租涫疼迟="pull-right"或者class="dropdown-menu-right"。当然，在Bootstrap中还提供了另外一个类class="dropdown-menu-left"，这个是让下拉菜单居左显示，也就是默认形式，下面代码演示了基本的使用方法：

2、代码中使用了网格系统，这是为了更好地对比演示菜单居右显示的问题，其中第二个和第三个菜单使用了不同的方式来居右显示。接下来有一个问题需要特别注意，将网格系统中的class="col-lg-1"改为class="col-lg-3"，代码如下：

3、何解决这个问题呢？我们需要先了解其本质。下拉菜单按钮在class="col-lg-3"中并未完全填充，而class="dropdown-menu"和父容器相关，要解决这个问题我们只需将下拉菜单的按钮居右显示即可，代码如下：

4、我们在class="col-lg-3"中添加了类"text-right"，让容器中的内容居右显示