下拉菜单导致滚动条

Question

我用过这个example from W3C：

<div class="dropdown">
    <button class="btn btn-sm dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">
        <span class="glyphicon glyphicon-menu-hamburger"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
        <li role="presentation"><a role="menuitem" href="#">HTML</a></li>
        <li role="presentation"><a role="menuitem" href="#">CSS</a></li>
        <li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" href="#">About Us</a></li>
    </ul>
</div>

这一切都有效，除了一件事。每当打开下拉菜单时，它都会使页面出现水平滚动条。参考下面的截图（注意图像底部的水平滚动条）：

解决这个问题的最“官方”方法是什么？

编辑：

---

添加小提琴：https://jsfiddle.net/aav5f25g/3/

Answer 1

你可以试试这个吗？

<div class="dropdown">
    <button class="btn btn-sm dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">
        <span class="glyphicon glyphicon-menu-hamburger"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="menu1">
        <li role="presentation"><a role="menuitem" href="#">HTML</a></li>
        <li role="presentation"><a role="menuitem" href="#">CSS</a></li>
        <li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" href="#">About Us</a></li>
    </ul>
</div>

我将dropdown-menu-right 添加到dropdown-menu

如果您使用的是旧版本，您可能会发现 pull-right 有效。

Answer 2

您可以将您的代码包装在 -

中，使用类“navbar-right”。 创建了一个快速演示。您可以检查以下内容：

.wrapper {
  max-width: 95%;
  margin: 0 auto;
  padding: 10px 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="wrapper">

<div class="navbar-right">
  
<div class="dropdown">
    <button class="btn btn-sm dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">
        <span class="glyphicon glyphicon-menu-hamburger"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
        <li role="presentation"><a role="menuitem" href="#">HTML</a></li>
        <li role="presentation"><a role="menuitem" href="#">CSS</a></li>
        <li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" href="#">About Us</a></li>
    </ul>
</div>
  
</div>
  
</div>

请全页打开演示。

更新 #2

检查修改过的小提琴 - https://jsfiddle.net/g03ta3rb/

Answer 3

所以这是另一个答案：https://jsfiddle.net/xpkh0qyu/

祝你好运

HTML

    <div id="container">
      <table id="table" class="custom-class">
        <!-- NEW CLASS ADDED -->
        <tr>
          <td></td>
          <td>
            <div class="dropdown">
              <button class="btn btn-sm dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">
                <span class="glyphicon glyphicon-menu-hamburger"></span>
              </button>
              <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                <li role="presentation"><a role="menuitem" href="#">HTML</a></li>
                <li role="presentation"><a role="menuitem" href="#">CSS</a></li>
                <li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
                <li role="presentation" class="divider"></li>
                <li role="presentation"><a role="menuitem" href="#">About Us</a></li>
              </ul>
            </div>
          </td>
        </tr>
      </table>

    </div>

CSS

      #container {
        width: 400px;
        height: 300px;
        background-color: #ccc;
        overflow: auto;
      }

      #table {
        border: 1px solid #ddd;
        width: 380px;
      }

      #table td:last-child {
        width: 1%;
      }


      /** NEW CODE ADDED **/

      .custom-class .dropdown-menu {
        right: 0;
        left: initial !important;
      }


      /** NEW CODE ADDED END **/