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>

这一切都有效，除了一件事。每当下拉列表打开时，它都会在页面上显示，从而显示水平滚动条。下面的参考屏幕截图（注意图像底部的水平滚动条）：

什么是最多＆＃34;官方＆＃34;解决这个问题的方法？

编辑：

添加小提琴：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

您可以将代码包装在 - ＆lt; div＆gt;中用“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 **/

下拉菜单会导致滚动条

3 个答案:

更新＃2