下拉菜单 向右对齐
Bootstrap下拉菜单 向右对齐
通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。下面的实例演示了这点：
Bootstrap默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。
可能需要额外的定位May require additional positioning
在正常的文档流中，通过 CSS 为下拉菜单进行定位。这就意味着下拉菜单可能会由于设置了 overflow 属性的父元素而被部分遮挡或超出视口（viewport）的显示范围。如果出现这种问题，请自行解决。
- 看，我在右边
- Bootstrap下拉菜单A 我在右边
- Bootstrap下拉菜单B 我在右边
- Bootstrap下拉菜单C 我在右边
<div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">Bootstrap下拉菜单 向右对齐实例 <span class="caret"> </span> </button> <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">看，我在右边</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Bootstrap下拉菜单A 我在右边</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Bootstrap下拉菜单B 我在右边</a> </li> <li role="presentation" class="divider"></li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Bootstrap下拉菜单C 我在右边</a> </li> </ul> </div>
从 v3.1.0 版本开始,不建议使用 .pull-right
从 v3.1.0 版本开始，我们不再建议对下拉菜单使用 .pull-right 类。如需将菜单右对齐，请使用 .dropdown-menu-right 类。导航条中如需添加右对齐的导航（nav）组件，请使用 .pull-right 的 mixin 版本，可以自动对齐菜单。如需左对齐，请使用 .dropdown-menu-left 类。
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel"> ... </ul> 正文到此结束
热门推荐
相关文章
近期评论
-
你这基本没有更新呀，最近文章显示还是2019年的文章。不符合要求哈
-
关键词：慕云博客 链接：https://www.lilun.me 描述：分享原创文字的个人博客
-
-
-
可以提供一下源码吗
-
不是商业站，鸡娃学习笔记
-
-
-
-
听他们说很厉害的样子
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
