如何为固定导航栏中的下拉列表添加滚动条

时间:2014-04-18 12:00:56

标签: css twitter-bootstrap drop-down-menu scroll

我使用navbar(bootstrap 3)作为我网站的主导航菜单,我有几个下拉菜单(其中一些填充了固定数据,一些数据来自数据库),我希望有每个下拉列表中都有一个Y滚动条,因此当用户点击drondown时,我的导航栏中没有更改任何内容,它显示了有限数据,可以滚动查看其余内容

非常感谢所有想法。 这是我的代码:

  <nav class="navbar navbar-inverse" role="navigation">
  <div class="collapse navbar-collapse navbar-ex1-collapse" >
        <ul class="nav navbar-nav">
            @if (Html.HasAssetContext())
            {
                <li><a href="@Url.Action("Index", Html.HasAssetContext() ? "Asset" : "Home")"><i class="icon-home"></i></a></li>
            }
            @if (Html.HasPermission(Category.SEARCH) && (Html.HasCompanyContext() || Html.IsClient()))
            {
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-search"></i>Search <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        @Html.MenuLink("Systems", "Index", "System")
                        @Html.MenuLink("Machines", "Index", "Machine")
                        @Html.MenuLink("Components", "Index", "Component")
                        @Html.MenuLink("Exceptions", "Index", "Exception")
                    </ul>
                </li>
            }
            @if (Html.HasPermission(Category.ORDER) && Html.OrderModuleEnabled())
            {
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-briefcase"></i>Order <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        @Html.MenuLink("Customers", "Customers", "Order")
                        @Html.MenuLink("Machine Orders", "MachineOrders", "Order")
                    </ul>
                </li>
            }
            @if (Html.HasAssetContext())
            {
                if (Html.HasPermission(Category.REPORT))
                {
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-file-text"></i>Report <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            @Html.MenuLink("Exception Charts", "Index", "Chart")
                            <li class="divider"></li>
                            @Html.MenuLink("PM Compliance By Machine", "MachinePmCompliance", "Report")
                            @Html.MenuLink("PM Compliance By Component", "ComponentPmCompliance", "Report")
                            <li class="divider"></li>
                            @Html.MenuLink("MTBE By Machine", "MachineMeanTimeBetweenException", "Report")
                            @Html.MenuLink("MTBE By Component", "ComponentMeanTimeBetweenException", "Report")
                            <li class="divider"></li>
                            @Html.MenuLink("Cost Benefit Analysis", "CostAnalysis", "Report")
                            @Html.MenuLink("Asset Hierarchy", "AssetHierarchy", "Report")
                        </ul>
                    </li>
                }
                if (Html.HasPermission(Category.DOCUMENT))
                {
                    <li><a href="@Url.Action("Documents", "Document")"><i class="icon-file"></i>Documents</a></li>
                }
                if (Html.HasPermission(Category.DATA_ENTRY))
                {
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-list"></i>Data <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            @Html.MenuLink("Identification Reports", "IdentificationReports", "Report")
                            @Html.MenuLink("Component Checklist", "ComponentChecklist", "Data")
                            @Html.MenuLink("Manage Engineers", "Engineers", "Data")
                        </ul>
                    </li>
                }
            }
            @if (Html.HasCompanyContext() || Html.IsClient())
            {
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-anchor"></i>Assets <b class="caret"></b></a>
                    @Html.AssetMenuLinks()
                </li>
            }
            @if (Html.HasPermission(Category.SELECT_COMPANY))
            {
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-building"></i>Companies <b class="caret"></b></a>
                    @Html.CompanyMenuLinks()
                </li>
            }
            @if (Html.HasPermission(Category.ADMINISTRATION))
            {
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i>Admin <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        @Html.MenuLink("Companies", "Companies", "Administration")
                        @Html.MenuLink("Assets", "Assets", "Administration")
                        @Html.MenuLink("Users", "Users", "Administration")
                        <li class="divider"></li>
                        @Html.MenuLink("Applications", "Applications", "Administration")
                        @Html.MenuLink("Bearings", "Bearings", "Administration")
                        @Html.MenuLink("Departments", "Departments", "Administration")
                        @Html.MenuLink("Environments", "Environments", "Administration")
                        @Html.MenuLink("Faults", "Faults", "Administration")
                        @Html.MenuLink("Manufacturers", "Manufacturers", "Administration")
                        @Html.MenuLink("Severities", "Severities", "Administration")
                        @Html.MenuLink("Techniques", "Techniques", "Administration")
                        @Html.MenuLink("Templates", "Templates", "Administration")
                        @Html.MenuLink("Work Order Statuses", "WorkOrderStatuses", "Administration")
                        <li class="divider"></li>
                        @Html.MenuLink("Import Data", "ImportData", "Administration")
                        @Html.MenuLink("Audit History", "AuditHistory", "Administration")
                    </ul>
                </li>
            }
            @if (!Html.IsClient())
            {
                <li><a href="@Url.Action("Index", "Info")"><i class="icon-info"></i>Info</a></li>
            }
        </ul>
           </div>
</nav>

1 个答案:

答案 0 :(得分:4)

正如我在评论中所说,在引导程序之后导入自定义css文件并尝试类似:

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

enter image description here