下拉菜单 向右对齐

W3CSchool > bootstrap3中文手册 > Bootstrap 下拉菜单 > 下拉菜单 向右对齐

Bootstrap下拉菜单 向右对齐

通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。下面的实例演示了这点:

Bootstrap默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。

可能需要额外的定位May require additional positioning

在正常的文档流中,通过 CSS 为下拉菜单进行定位。这就意味着下拉菜单可能会由于设置了 overflow 属性的父元素而被部分遮挡或超出视口(viewport)的显示范围。如果出现这种问题,请自行解决。

<div class="dropdown">
   <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
      data-toggle="dropdown">Bootstrap下拉菜单 向右对齐实例
      <span class="caret">&nbsp;</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>

没有找到答案?搜索一下吧!

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)