如果它超出浏览器边缘，则在左侧显示引导菜单或子菜单

Question

检查我的FIDDLE，因为您可以看到有一些下拉菜单，请按照＆＃39; Dropdown＆＃39;的方式调整浏览器的大小。菜单会出现在右侧。然后转到第二级菜单＆＃39;你可以看到子菜单在右侧打开，因此它们不完全可见。虽然我们在左侧有空间，但如果超出屏幕，我们可以在左侧显示子菜单。

它看起来如何：

所以这就是我想要实现的目标：

1. 如何检测特定菜单是否超出浏览器边缘？
2. 检测后如何使其反向对齐，以便用户可以看到它。

它应该如何表现，如果右侧没有足够的空间打开子菜单，菜单将显示在左侧：



HTML

<ul class="nav nav-pills">
  <li class="active"><a href="#">Regular link</a></li>
    <li class="dropdown">
    <a href="#">Menu</a>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
  <li class="dropdown">
    <a href="#">Menu</a>
  </li>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret">        </b></a>
    <ul class="dropdown-menu" id="menu1">
      <li>
      <a href="#">2-level Menu <i class="icon-arrow-right"></i></a>
      <ul class="dropdown-menu sub-menu">
        <li><a href="#">I can be in left side</a></li>
        <li><a href="#">Why i am coming on right side</a></li>
        <li><a href="#">I want to come in Left side</a></li>
        <li><a href="#">Enough space in left</a></li>
        <li><a href="#">I will not be visible as i am long</a></li>
      </ul>
      </li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </li>
</ul>

Answer 1

如果页面右侧的下拉列表，您可以使用pull-left：Fiddle 您可以使用一些JS通过计算div位置

使其在浏览器重新调整大小时动态化