下拉菜单导致滚动条 [英] Dropdown menu causes scrollbar

问题描述

我使用了这个

解决此问题的最官方"方式是什么?

---

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

解决方案

您可以尝试吗?

 < 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 =#">关于我们</a></li></ul></div> 

我在 dropdown-menu

中添加了 dropdown-menu-right

如果您使用的是旧版本，则可能会发现向右有效.

I used this 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>

And it all works, except for one thing. Whenever dropdown is opened it outfits the page making a horizontal scrollbar to appear. Ref screenshot below (note horizontal scrollbar at the bottom of the images):

What would be most "official" way to fix this?

EDIT:

---

Added fiddle: https://jsfiddle.net/aav5f25g/3/

解决方案

Could you try this?

<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>

I added dropdown-menu-right to the dropdown-menu

You may find that pull-right works if you're using an older version.

这篇关于下拉菜单导致滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！