如何使Twitter Bootstrap子菜单向左打开？

Question

我试图在下拉菜单中创建Twitter Bootstrap子菜单，但是遇到了问题：我在页面的右上角有一个下拉菜单，该菜单还有一个子菜单。然而，当子菜单打开时 - 它不适合窗口并向右侧移动得太多，以至于用户只能看到前几个字母。如何使子菜单向左而不是向右打开？

- kovpack

---

发布代码片段。 - Shankar Cabus

тюеBootstrap 4СИГ№╝їтюе.dropdownт«╣тЎеСИіТи╗тіа.pull-rightсђѓ - jbyrd

Answer 1

如果我理解正确的话，bootstrap 提供了一个特定情况下使用的 CSS 类。在菜单 "ul" 上添加 'pull-right'：

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

最终结果是菜单选项与它们所对应的按钮右对齐。

- Matt

---

在 UL 级别上，马特做了很棒的补充。 - KeyOfJ

当时我需要移动主菜单而不是子菜单，因此我需要定位到<ul>元素。这很令人困惑，因为您想将其向左移动，但是却使用pull-right类来实现这一点。 - FireDragon

此答案适用于Bootstrap 3.x版本，因此目前看来是最正确的答案。 - alx

被接受的答案对我在Bootstrap 3中不起作用，但是这个答案可以！ - Josh Bilderback

这是正确的。添加.pull-right，你的下拉菜单就不会超出屏幕右侧！ - slindsey3000

Answer 2

最简单的方法是在你的 dropdown-submenu 中添加 pull-left 类。

<li class="dropdown-submenu pull-left">

jsfiddle：演示

- Schmalzy

---

这个答案连同Matt在UL级别的回答一起，是使用Bootstrap实现此功能的正确方式。 - KeyOfJ

OP的问题和我的回答来自2012年8月。与此同时，Bootstrap已经发生了变化，现在你有.pull-left类。当时，我的回答是正确的。现在你不必手动设置CSS，你有.pull-left类。 - Miljan Puzović

这对某些情况下非常有效，但如果主菜单中的项目过长，则会出现问题，例如在此fiddle中：http://jsfiddle.net/szx4Y/446/有没有快速修复的想法？ - Aaron Lifshin

@AaronLifshin .dropdown-submenu.pull-left>.dropdown-menu { width: 100%; } 这不是一个优雅的解决方案，但似乎可以工作 http://jsfiddle.net/r1v90tas/ - Schmalzy

@Schmalzy 进一步观察，width:100% 对子菜单中的长项目会产生不同的问题 http://jsfiddle.net/r1v90tas/1/，使用 min-width:100% 并按照此处的方式进行修复：http://jsfiddle.net/r1v90tas/2/ - Aaron Lifshin

它将无法处理过长的菜单名称。请尝试编辑jsfiddle并在任何子菜单中输入“Benchmarking Experience Project Workbook Data Dictionary”。 - Hassan Dad Khan

Answer 3

当前类 .dropdown-submenu > .dropdown-menu 的属性为 left: 100%;。因此，如果您希望在左侧打开子菜单，请将这些设置覆盖为负向左侧位置。例如left: -95%;。现在，您将在左侧获得子菜单，并且您可以调整其他设置以获得完美的预览。

这里是演示 编辑：OP的问题和我的答案来自2012年8月。与此同时，Bootstrap已更改，现在您有.pull-left类。那时，我的回答是正确的。现在你不必手动设置CSS，你有那个.pull-left类。

编辑二：演示不起作用，因为Bootstrap更改了它们的URL。只需在jsfiddle中更改外部资源并用新资源替换它们即可。

- Miljan Puzović

---

谢谢。几乎是我需要的，但是应该有 left: -90%;（否则我无法将鼠标移动到子菜单上，因为它会消失）。 - kovpack

就像我说的那样，这只是你需要做的想法。很高兴我能帮到你 :) - Miljan Puzović

你的示例只适用于某些情况。请看这里：http://jsfiddle.net/mQnv2/305/ - Alexandru R

这不是正确的答案，应该按照Schmalzy和Matt的帖子中提到的使用bootstrap类。 - KeyOfJ

这篇文章已经过去一年了。与此同时，Bootstrap已经发生了变化，因此Schmalzy的答案更加优雅。当时，Bootstrap没有pull-left类。 - Miljan Puzović

Bootstrap又改了。现在应该是.dropdown-menu-right而不是.pull-left（没错，就是右边，请看我的jsfiddle）http://jsfiddle.net/yqt4hfbj/ - Jeroen

Answer 4

如果你正在使用bootstrap v4，有一种新的方法可以做到这一点。

你应该在.dropdown-menu元素上使用.dropdown-menu-right。

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

代码链接: https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-items

- Felipe Miosso

---

这也适用于Bootstrap版本>= 3.1...请查看https://dev59.com/MmMm5IYBdhLWcg3wDrtR#19253730 - The.Bear

绝对是最简单的答案。 - crodev

这对于版本4来说有些正确。语法已更改为“dropleft”和“dropright”，但答案的上下文是正确的。谢谢！ - cfnerd

Answer 5

完成任务的正确方式是：

/* Submenu placement itself */
.dropdown-submenu > .dropdown-menu { left: auto; right: 100%; }
/* Arrow position */
.dropdown-submenu { position: relative; }
.dropdown-submenu > a:after { position: absolute; left: 7px; top: 3px; float: none; border-right-color: #cccccc; border-width: 5px 5px 5px 0; }
.dropdown-submenu:hover > a:after { border-right-color: #ffffff; }

- Ruslan Sukhar

---

更多的是偏好 .dropdown-submenu { position: relative; text-align:right; } 将文本定位到右侧，当箭头在左侧时。 - Arvind

Answer 6

我创建了一个JavaScript函数，它会检查右侧是否有足够的空间。如果有足够的空间，它将显示在右侧，否则它将显示在左侧。

测试环境：

- Firefox (mac) - Chrome (mac) - Safari (mac)

JavaScript代码：

$(document).ready(function(){
    //little fix for the poisition.
    var newPos     = $(".fixed-menuprofile .dropdown-submenu").offset().left - $(this).width();
    $(".fixed-menuprofile .dropdown-submenu").find('ul').offset({ "left": newPos });

    $(".fixed-menu .dropdown-submenu").mouseover(function() {
        var submenuPos = $(this).offset().left + 325;
        var windowPos  = $(window).width();
        var oldPos     = $(this).offset().left + $(this).width();
        var newPos     = $(this).offset().left - $(this).width();

        if( submenuPos > windowPos ){
            $(this).find('ul').offset({ "left": newPos });
        } else {
            $(this).find('ul').offset({ "left": oldPos });
        }
    });
});

因为我不想在每个菜单项上添加这个修复，所以我在它上面创建了一个新类。

将修复后的菜单放置在 ul 上：

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

我希望这对你有用。

附：Safari和Chrome中有一个小错误，第一次悬停会将其放置得太靠左，如果我修复了它，我会更新此帖子。

- Mitchel Verschoof

---

+1：我做了几个修改，但这让我得到了一个可行的解决方案。 - zimdanen

真棒的解决方案！ - arefindev

Answer 7

如果您只有一个级别，且使用的是bootstrap 3，则在

元素中添加即可。


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

- Mauro

Answer 8

实际上 - 如果你可以使用浮动的方法来布置下拉菜单包装器 - 我发现只需将 navbar-right 添加到 下拉菜单 就像添加到导航栏一样容易。

这似乎有点作弊，因为它不是在导航栏中，但对我来说它也很好用。

<div class="dropdown navbar-right">
...
</div>

您可以通过在dropdown中直接使用pull-left来进一步自定义浮动效果...

<div class="dropdown pull-left navbar-right">
...
</div>

... 或者作为它的包装器 ...

<div class="pull-left">
  <div class="dropdown navbar-right">
  ...
  </div>
</div>

- zeroasterisk

Answer 9

我创建了一个JavaScript函数，用于检查右侧是否有足够的空间。如果有，它将显示在右侧；否则，它将显示在左侧。如果右侧有足够的空间，它将继续显示在右侧。这是一个循环...

$(document).ready(function () {

$('body, html').css('overflow', 'hidden');
var screenWidth = $(window).width();
$('body, html').css('overflow', 'visible');

if (screenWidth > 767) {

    $(".dropdown-submenu").hover(function () {

        var dropdownPosition = $(this).offset().left + $(this).width() + $(this).find('ul').width();
        var newPosition = $(this).offset().left - $(this).find('ul').width();
        var windowPosition = $(window).width();

        var oldPosition = $(this).offset().left + $(this).width();
        //document.title = dropdownPosition;
        if (dropdownPosition > windowPosition) {
            $(this).find('ul').offset({ "left": newPosition });
        } else {
            $(this).find('ul').offset({ "left": oldPosition });
        }
    });

}

});

- SUAT SUPHI

---

它可以工作！但是让我们限制一下：var newPosition = Math.max(10, ...); - djdance

Answer 10

如果您正在使用LESS CSS，我写了一个小的mixin来移动带有连接箭头的下拉菜单：

.dropdown-menu-shift( @num-pixels, @arrow-position: 10px ) {  // mixin to shift the dropdown menu
    left: @num-pixels;
    &:before { left: -@num-pixels + @arrow-position; }        // triangle outline
    &:after  { left: -@num-pixels + @arrow-position + 1px; }  // triangle internal
}

例如，要移动一个带有id为dropdown-menu-x的.dropdown-menu，您可以执行以下操作：

#dropdown-menu-x {
    .dropdown-menu-shift( -100px );
}

- isapir