Css 列表可滚动时屏幕外出现的引导下拉菜单_Css_Twitter Bootstrap_Dropdown

Css 列表可滚动时屏幕外出现的引导下拉菜单

css twitter-bootstrap

Css 列表可滚动时屏幕外出现的引导下拉菜单,css,twitter-bootstrap,dropdown,Css,Twitter Bootstrap,Dropdown,我有一个未排序的列表，需要有一个固定的高度列表中的每个项目都与引导下拉菜单相关联通过每个项上的按钮（…）打开前几个项目的下拉菜单将正确显示但是，只要我向下滚动列表并单击…按钮，下拉菜单将在屏幕外显示 <head> <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3

我有一个未排序的列表

项上的按钮（…）打开

前几个项目的下拉菜单将正确显示

但是，只要我向下滚动列表并单击…按钮，下拉菜单将在屏幕外显示

<head>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
<div class="my-list">
    <ul>
        <li>
            <span>Item 1</span>
            <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown">
                <i class="glyphicon glyphicon-option-horizontal"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-right">
                <li><a>Edit</a></li>
            </ul>
        </li>

        <li>
            <span>Item 2</span>
            <button class="btn btn-link dropdown-toggle" title="More Actions" type="button" data-toggle="dropdown">
                <i class="glyphicon glyphicon-option-horizontal"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-right">
                <li><a>Edit</a></li>
            </ul>
        </li>
        <li>
            <span>Item 3</span>
            <button class="btn btn-link dropdown-toggle" title="More Actions" type="button" data-toggle="dropdown">
                <i class="glyphicon glyphicon-option-horizontal"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-right">
                <li><a>Edit</a></li>
            </ul>
        </li>
        <li>
            <span>Item 4</span>
            <button class="btn btn-link dropdown-toggle" title="More Actions" type="button" data-toggle="dropdown">
                <i class="glyphicon glyphicon-option-horizontal"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-right">
                <li><a>Edit</a></li>
            </ul>
        </li>

    </ul>
</div>

问题： 如何使下拉菜单直接显示在“…”按钮（*）下方

（*）或在列表上最后一项的情况下直接出现在上面。

这就是您要寻找的效果吗

<div class="my-list">
    <ul class= "nav">
        <li>
            <span>Item 1</span>
            <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown">
                <i class="glyphicon glyphicon-option-horizontal"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu">
                <li><a>Edit</a></li>
            </ul>
        </li>




项目1

编辑

将溢出设置为溢出：可见；需要是“导航”，并且class=“dropdown menu dropdown menu”

这就是您想要的效果吗

<div class="my-list">
    <ul class= "nav">
        <li>
            <span>Item 1</span>
            <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown">
                <i class="glyphicon glyphicon-option-horizontal"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu">
                <li><a>Edit</a></li>
            </ul>
        </li>




项目1

编辑

将溢出设置为溢出：可见；需要是“nav”，并且class=“dropdown menu dropdown menu”

您介意在小提琴中共享代码示例吗？嗨，斯卡萨姆，这是您介意在小提琴中共享代码示例吗？嗨，斯卡萨姆，这是感谢TomBB。添加class=“nav”已实现所需的行为。我会保留CSS“overflow:auto”，因为我希望列表具有固定的高度。当列表中有很多项目时，将溢出更改为可见似乎会使列表高度自动增长。更多的荣誉归于TomBB。这是使用带有下拉菜单的nav类的一种非常巧妙的方法。我试着用谷歌搜索这个导航类的含义，但大多数页面都涉及导航栏或导航。我很高兴我能提供帮助。谢谢你TomBB。添加class=“nav”已实现所需的行为。我会保留CSS“overflow:auto”，因为我希望列表具有固定的高度。当列表中有很多项目时，将溢出更改为可见似乎会使列表高度自动增长。更多的荣誉归于TomBB。这是使用带有下拉菜单的nav类的一种非常巧妙的方法。我试着用谷歌搜索这个导航类的含义，但大多数页面都涉及导航栏或导航。我很高兴我能提供帮助。