Question

我的Bootstrap导航栏中有一个下拉菜单，其中包含可能很长的项目列表，因此它应该是可滚动的。在列表的末尾，我有一个分隔符和列表中的“添加新项”条目。

我想保持这个项目列表可滚动，但我希望分隔符和“添加新项目”条目固定在菜单的底部。这样，用户可以添加一些内容而无需一直滚动到底部。此外，如果列表太长，用户可能不知道该选项，因为它将隐藏在底部。

Answer 1

您无需执行“height：auto”

让你的下拉列表这个css：

max-height: 000px;
overflow-x: hidden;
overflow-y: scroll;

000 =您的服装身高（200/300/500 ......）

Answer 2

底部带有固定菜单项的可滚动菜单

HTML

<body role="document">
    <!-- navbar -->
    <nav class="navbar navbar-inverse navbar-default">
        <div class="container">
            <div class="navbar-header">
                <!-- menu button -->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#menu" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <!-- navbar collapse menu -->
            <div id="menu" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            Menu <span class="caret"></span></a>
                        <<div class="scrollable-menu-container">
                        <ul class="dropdown-menu scrollable-menu" role="menu">
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li class="divider" role="separator"></li>
                            <li><div class="separateme">
                                     <a href="#"><span class="glyphicon glyphicon-plus-sign"></span>                                        Add a new item</a>
                                     </div></li>
                        </ul>
                    </li>
                </ul>
                     </div><!-- /scrollable-menu-container -->
            </div>
        </div>
    </nav> <!-- /navbar -->
</body>

CSS

.scrollable-menu-container {
    display:block;
    height: calc(200px + 30px);/* height of scrollable menu plus line height */
    background:Plum;
}

.scrollable-menu {
            height: auto;
            max-height: 200px;
            overflow-x: hidden;
            overflow-y: scroll;
                background:Pink;
        }

          .separateme {
            position:absolute;
            top:290px;/* push to bottom */
          }

https://jsfiddle.net/cmckay/2v41gnbv/

使Bootstrap导航栏下拉列表的一部分可滚动

2 个答案: