下拉菜单（对齐方式），玩转Bootstrap（基础）教程-慕课网

下拉菜单（对齐方式）

实现右对齐方法：

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;
}

任务

我来试试：完成下面任务

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

?不会了怎么办

参考代码：

<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">
    <li role="presentation" class="dropdown-header">水果</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">苹果</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">梨</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">桃</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="dropdown-header">蔬菜</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">芹菜</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">萝卜</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">茄子</a></li>
</div>

备注:这一小节没有正确性验证，请查看结果窗口与教案所给的结果图片是否一致，从而判断输入代码是否正确。

index.html
style.css

1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
body {
  padding: 50px 
      100px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

提交

自动运行

重置代码

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

问答
评论
笔记
代码

全部精华我要发布

按钮和列表用什么联系起来的啊

最新回答 / 绝尘kinoko

前面不是讲了原理吗，通过js，或者说是jQuery代码实现的。详见5-2。如果你说的是按钮和列表的一一对应，按钮是有id，对应的是ul的aria-labelledby属性。

1 回答 751 浏览

2019-07-06

dropdown下拉列表是什么作用？怎么不能选中菜单啊？

最赞回答 / 丝米大大

<...code...>

2 回答 2194 浏览

2019-02-15

无法和父容器的右边对齐

已采纳回答 / 慕斯卡7269444

抱歉，前面回答不对。需要添加 float:left;

4 回答 1585 浏览

2018-12-24

选择居右之后下拉列表的左边一部分文字就看不到了，怎么解决？

最新回答 / 明明的明天12

还可以给.dropdown-menu加'text-align:right'

2 回答 1279 浏览

2018-09-05

右对齐的代码复制到编辑器中浏览的效果变了

最新回答 / 慕移动9181930

成员变量和局部变量的用法mitshvxhotrojxwlzppkbybcwwbvxarspzrzsz

2 回答 1782 浏览

2022-03-29

下拉菜单项的框框怎么不和按钮一样长

最新回答 / 慕婉清64744

因为ul.dropdown-menu加了min-width为160px；里面的a标签也加了padding值

1 回答 1077 浏览

2018-01-17

默认自带的权重真的是号恶心

最新回答 / MR帽子先生

说清楚一点，我没看懂啊？是要靠边还是怎么的？你要靠边的话可以通过ID重新写个CSS覆盖上去，而且你说的应该是UL默认的边距造成的你可以重新覆盖的。希望对你有帮助。祝你学习愉快！

1 回答 663 浏览

2017-06-25

<ul class="dropdown-menu dropdown-menu-right">

最赞回答 / 慕哥0602982

dropdown-menu-right效果跟pull-right是一样的

1 回答 1348 浏览

2017-06-03

<div class="dropdown" > <button type="button" class="btn btn-defaule dropdown-toggle" data-toggle="dropdown"> 你喜欢干什么 <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-left" role="menu...

3 回答 926 浏览

2018-09-04