jquery - Bootstrap 可滚动下拉菜单，分隔符后固定最后一个元素

Question

我正在使用带下拉菜单的 bootstrap3。我想让列表项可滚动，除了最后一个(在分隔符之后)应该始终可见并固定在列表末尾。我现在有以下代码，我的问题是使用这段代码最后一个元素也是可滚动的，我不知道我应该做什么。

我应该在代码中更改什么？

<ul class = "dropdown-menu scrollable-bootstrap-menu">
  <li><a href='#'>item1</a></li>         //from here
  <li><a href='#'>item2</a></li>
  <li><a href='#'>item3</a></li>
  <li><a href='#'>item4</a></li>        //to here should be scrollable
  <li role="separator" class="divider"></li>
  <li><a href='#'>View all items</a></li> //should be non scrollable (always visible/fixed)
</ul>

CSS

.scrollable-bootstrap-menu {
  height: auto;
  max-height: 100px;
  overflow-x: hidden;
}

Answer 1

我知道做到这一点的唯一方法是在列表中有一个列表。像这样:

<ul class="dropdown-menu scrollable-bootstrap-menu">
  <li>
    <ul>
      <li><a href='#'>item1</a></li>
      <li><a href='#'>item2</a></li>
      <li><a href='#'>item3</a></li>
      <li><a href='#'>item4</a></li>
    </ul>
  </li>
  <li role="separator" class="divider"></li>
  <li><a href='#'>View all items</a></li>
</ul>

然后将内部列表设置为在溢出时滚动。

.scrollable-bootstrap-menu ul {
  height: auto;
  max-height: 50px;
  overflow-x: hidden;
}

这是一个演示(没有太多样式，但它有效):

Demo

或检查下面的完整代码:

.scrollable-bootstrap-menu ul {
  height: auto;
  max-height: 50px;
  overflow-x: hidden;
}

ul {
  list-style: none;
  padding: 5px 0;
}

<ul class="dropdown-menu scrollable-bootstrap-menu">
  <li>
    <ul>
      <li><a href='#'>item1</a></li>
      <li><a href='#'>item2</a></li>
      <li><a href='#'>item3</a></li>
      <li><a href='#'>item4</a></li>
    </ul>
  </li>
  <li role="separator" class="divider"></li>
  <li><a href='#'>View all items</a></li>
</ul>