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

我试图在下拉菜单中创建twitter bootstrap子菜单，但遇到一个问题：我在页面的右上角有下拉菜单，并且该菜单还有一个子菜单。但是，子菜单打开时-它不适合窗口且向右移太多，因此用户只能看到第一个字母。如何使该子菜单不在右侧打开，而是在左侧打开？

最简单的方法是将pull-left类添加到您的dropdown-submenu

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

jsfiddle：演示

如果我了解这一权利，bootstrap就为这种情况提供了CSS类。在菜单'ul'中添加'pull-right'：

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

..最终结果是菜单选项显示为右对齐，与下拉菜单中的按钮一致。

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

这是演示

编辑：OP的问题和我的答案来自2012年8月。同时，Bootstrap更改了，所以现在您有了.pull-left类。那时，我的回答是正确的。现在，您不必手动设置css，而有了.pull-left类。

编辑2：演示无法正常工作，因为Bootstrap更改了其URL。只需在jsfiddle中更改外部资源，然后将其替换为新资源即可。

如果您使用的是Bootstrap v4，则有一种新的方法。

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

<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

正确的方法是：

/* 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; }

我创建了一个JavaScript函数，该函数可以查看他在右侧是否有足够的空间。如果有，他将在右侧显示，否则，他将在左侧显示

经过测试：

• Firefox（Mac）
• 乔姆（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">

希望对您有用。

ps。Safari和Chrome的小错误，如果我将其修复，则先将鼠标悬停在左侧，然后将其更新。

如果只有一个级别并且使用了引导程序3，则添加pull-right到ul元素

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

实际上-如果您可以浮动dropdown包装器-我发现它就像添加navbar-right到包装中一样容易dropdown。

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

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

然后，您可以pull-left直接在dropdown...中进一步自定义浮动

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

...或作为包装纸...

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

如果您使用的是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
}

然后，例如，移动.dropdown-menuID dropdown-menu-x为的a，您可以执行以下操作：

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

我创建了一个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 });
        }
    });

}

}）;

您使用的是最新版本的引导程序吗？我已经从Fluid Layout示例中改编了html，如下所示。我添加了一个下拉列表，并通过添加pull-right类将其放置在最右侧。将鼠标悬停在下拉菜单上时，它将自动拉到左侧，并且没有任何隐藏内容-所有菜单文本均可见。我还没有使用任何自定义的CSS。

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse collapse">
        <ul class="nav pull-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
          <li class="dropdown open">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <p class="navbar-text pull-right">
          Logged in as <a href="#" class="navbar-link">Username</a>
        </p>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

您唯一要做的就是

 <ul style='left:-100%'> 

您要在右侧显示的菜单的。