引导程序:下拉菜单相对于导航栏项目的位置 [英] Bootstrap: Position of dropdown menu relative to navbar item

问题描述

我有以下下拉列表

<label class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#">
    Action <b class="caret"></b></label>
<ul class="dropdown-menu" role="menu" aria-labelledby="lang-selector" id="lang-selector">
    dropdown content goes here
</ul>

下拉菜单的左上角在文本的左下角(动作)，但我希望下拉菜单的右上角的位置在文本的右下角.我该怎么办?

The upper-left corner of the dropdown is at the lower-left corner of the text (Action), but I hope that the position of the upper-right corner of the dropdwon is at the lower-right place of the text. How can I do that?

推荐答案

这是我们正在努力实现的效果:

This is the effect that we're trying to achieve:

随着Bootstrap 3.1.0的发布，以及随着Bootstrap 4的发布，需要应用的类都发生了变化.如果以下解决方案之一似乎不起作用，请仔细检查的版本号.引导您要导入的引导程序，然后尝试其他引导程序.

The classes that need to be applied changed with the release of Bootstrap 3.1.0 and again with the release of Bootstrap 4. If one of the below solutions doesn't seem to be working double check the version number of Bootstrap that you're importing and try a different one.

您可以使用pull-right类将菜单的右侧与插入符号对齐:

You can use the pull-right class to line the right hand side of the menu up with the caret:

<li class="dropdown">
  <a class="dropdown-toggle" href="#">Link</a>
  <ul class="dropdown-menu pull-right">
     <li>...</li>
  </ul>
</li>

提琴: http://jsfiddle.net/joeczucha/ewzafdju/

从v3.1.0开始，下拉菜单中的.pull-right已弃用.到 右对齐菜单，使用.dropdown-menu-right.右对齐导航 导航栏中的组件使用此类的混合版本来 自动对齐菜单.要覆盖它，请使用.dropdown-menu-left.

As of v3.1.0, we've deprecated .pull-right on dropdown menus. To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .dropdown-menu-left.

您可以使用dropdown-right类将菜单的右侧与插入符号对齐:

You can use the dropdown-right class to line the right hand side of the menu up with the caret:

<li class="dropdown">
  <a class="dropdown-toggle" href="#">Link</a>
  <ul class="dropdown-menu dropdown-menu-right">
     <li>...</li>
  </ul>
</li>

提琴: http://jsfiddle.net/joeczucha/1nrLafxc/

Bootstrap 4的类与Bootstrap> 3.1.0相同，请注意周围的其余标记略有变化:

The class for Bootstrap 4 are the same as Bootstrap > 3.1.0, just watch out as the rest of the surrounding markup has changed a little:

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#">
    Link
  </a>
  <div class="dropdown-menu dropdown-menu-right">
    <a class="dropdown-item" href="#">...</a>
  </div>
</li>

提琴: https://jsfiddle.net/joeczucha/f8h2tLoc/

这篇关于引导程序:下拉菜单相对于导航栏项目的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！