如何限制引导 btn-dropdowns 中显示的项目数量 [英] How do you limit the number of items on show in the bootstrap btn-dropdowns

问题描述

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

I am making a search bar with bootstrap and one of the elements is a category list. The problem is at the moment when I press the category button it shows every single category in the list at the same time - making the UI awful! How can I limit the number of concurrent options on show?

这是问题的一个例子:

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

For example I might just want to show the first 5 options and then have a scroll bar for the rest?

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

This is the markup used to create what I have so far:

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

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

A fiddle we are working with to try to show the problem can be found here: http://jsfiddle.net/c7vcuLsa/2/

推荐答案

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

Why not just add an overflow to the UL?

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

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

这篇关于如何限制引导 btn-dropdowns 中显示的项目数量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！