5-5 下拉菜单（对齐方式）
本节编程练习不计算学习进度，请电脑登录imooc.com操作

下拉菜单（对齐方式）

实现右对齐方法：

Bootstrap框架中下拉菜单默认是左对齐，如果你想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名，如下所示：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  下拉菜单
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
   …
  </ul>
</div>

上面代码中的“pull-right”类可以用“dropdown-menu-right”代替，两个类的作用是一样的，可从下面的源代码中看出。

实现原理：

对应的样式如下：

/*源码请查看bootstrap.css文件第3030行～第3033行和3082行～第3085行*/

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

同时一定要为.dropdown添加float:leftcss样式。

.dropdown{
  float: left;
}

运行效果如下所示：

下拉菜单与父容器左边对齐:

与此同时，还有一个类名刚好与“dropdown-menu-right”相反的类名“dropdown-menu-left”，其效果就是让下拉菜单与父容器左边对齐，其实就是默认效果。

/*请查看bootstrap.css文件第3086行～第3089行*/

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

任务

我来试试：完成下面任务

编写代码实现下拉菜单，效果如下图：

 

index.htmlstyle.css 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>对齐方式</title>
  6. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  7. <link rel="stylesheet" href="style.css">
  8. </head>
  9. <body>
  10. <h4>使用pull-right类使下拉菜单与父容器右边对齐</h4>
  11.  <div class="dropdown">
  12.   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  13.     下拉菜单
  14.     <span class="caret"></span>
  15.   </button>
  16.   <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
  17.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  18.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  19.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  20.     <li role="presentation" class="divider"></li>
  21.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  22.   </ul>
  23. </div>
  24. <br />
  25. <br />
  26. <h4>使用dropdown-menu-right类使下拉菜单与父容器右边对齐</h4>
  27. <div class="dropdown">
  28.   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  29.     下拉菜单
  30.     <span class="caret"></span>
  31.   </button>
  32.   <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
  33.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  34.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  35.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  36.     <li role="presentation" class="divider"></li>
  37.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  38.   </ul>
  39. </div> 
  40. <br />
  41. <br />
  42. <h4>下拉菜单与父容器左边对齐</h4>
  43. <div class="dropdown">
  44.   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  45.     下拉菜单
  46.     <span class="caret"></span>
  47.   </button>
  48.   <ul class="dropdown-menu dropdown-menu-left" role="menu" aria-labelledby="dropdownMenu1">
  49.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  50.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  51.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  52.     <li role="presentation" class="divider"></li>
  53.     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  54.   </ul>
  55. </div> 
  56.   <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  57.   <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
  58. </body>
  59. </html>
  1. body {
  2.   padding: 50px 100px;
  3. }
  4. .dropdown{
  5.   float: left;
  6. }
  7. h4{
  8.     font-weight:bold;
  9. }
下一节