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

问题描述

我有以下下拉菜单

操作 <b class="caret"></b></label><ul class="dropdown-menu" role="menu" aria-labelledby="lang-selector" id="lang-selector">下拉内容在这里

dropdown的左上角在文字的左下角(Action)，但希望dropdwon的右上角位置在文字的右下角.我该怎么做?

解决方案

这是我们想要达到的效果:

需要应用的类随着 Bootstrap 3.1.0 和 Bootstrap 4 的发布而改变.如果以下解决方案之一似乎不起作用 请仔细检查版本号您正在导入的 Bootstrap 并尝试不同的.

引导程序 3

v3.1.0 之前

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

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

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

v3.1.0 之后

<块引用>

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

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

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

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

引导程序 4

Bootstrap 4 的类与 Bootstrap > 3.1.0 相同，请注意周围标记的其余部分发生了一些变化:

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

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

I have the following dropdown

<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:

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.

Bootstrap 3

Before v3.1.0

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>

Fiddle: http://jsfiddle.net/joeczucha/ewzafdju/

After v3.1.0

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.

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>

Fiddle: http://jsfiddle.net/joeczucha/1nrLafxc/

Bootstrap 4

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>

Fiddle: https://jsfiddle.net/joeczucha/f8h2tLoc/

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