Question

我有一个无序列表＆lt; ul＆gt;需要有一个固定的高度。

列表中的每个项目都与Bootstrap下拉菜单相关联通过每个＆lt; li＆gt;上的按钮（ ... ）打开项目

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

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

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

的style.css

.dropdown-menu {
  top: auto;
}

.my-list {
  height: 160px;
  background-color: rgb(179, 229, 252);
  padding-left: 1px;
  padding-top: 3px;
  padding-bottom: 0;
  overflow: auto;    /* Enable scrollbar for the list */
}

.my-list li {
  list-style-type: none;
  padding: 8px 4px 8px 8px;
  border-width: thin;
  border-bottom-style: solid;
  border-bottom-color: rgb(208, 208, 208);
}

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

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

Answer 1

这是你正在寻找的效果吗？

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

将溢出设置为溢出：可见;需要是“nav”，而class =“dropdown-menu dropdown-menu”

当列表可滚动时，Bootstrap下拉菜单出现在屏幕外

1 个答案: