css - 你如何限制在 bootstrap btn-dropdowns 中显示的元素数

Question

我正在使用 bootstrap 制作一个搜索栏，其中一个元素是类别列表。问题是当我按下类别按钮时它会同时显示列表中的每个类别 - 使 UI 变得糟糕!如何限制同时显示的选项数量？

这是问题的一个例子:

例如，我可能只想显示前 5 个选项，然后为其余选项设置一个滚动条？

这是用于创建我目前拥有的内容的标记:

<form class="navbar-form" role="search" action="/search" method="get">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Search for an event" name="q" id="q">
        <div class="input-group-btn">
        <div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
  Dropdown
  <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<% @categories.each do |category| %>
<% category.sub_categories.each do |sub_category| %>
<li><a href="#"><%= sub_category.name %></a></li>
<% end %>
<% end %>
</ul>

可以在此处找到我们正在使用的 fiddle 来尝试显示问题:http://jsfiddle.net/c7vcuLsa/2/

Answer 1

为什么不直接向 UL 添加溢出？

http://jsfiddle.net/0Lmjppsz/1/

.menu-scroll {
  overflow-y: scroll;
  max-height: 200px;
}