小型设备中的Bootstrap下拉菜单

I have a dropdown list (with 15-20 items) on navbar. All the dropdown items are not visible on mobile phone.

我在导航栏上有一个下拉列表（包含15-20项）。手机上看不到所有下拉项目。

I have tried below inside bootstrap.css:

我在bootstrap.css下面尝试过：

.navbar-collapse.in {
        overflow-y: visible;
        overflow-y: auto;          
    }

It's not working.(Bootstrap v3.0.3)

它不起作用。（Bootstrap v3.0.3）

HTML:

HTML：

        <div class="navbar navbar-default" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>                        
                </div>
                <div class="navbar-collapse collapse" id="templatemo-nav-bar">                        
                    <div class="navbar-left" style="width: 98%; float: left;">                            
                        <ul class="nav navbar-nav navbar-right" id="dropdownState">                                
                            <li class="dropdown" style="margin-top: 4px; background-color: #5e8fed; color: #fff; border-top: 1px solid #02215b; border-bottom: 1px solid #02215b;">                                    
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-university" aria-hidden="true"></i>&nbsp;StateName <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                     //loop here
                                   <li><a data-id="@item.Value" class="lnkChangeState" href="javascript:;"><i class="fa fa-check" aria-hidden="true"></i>&nbsp;@item.Text</a></li> 
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>                 
            </div>              
        </div>          
    </div>

How can I make it working on small devices as well?

我怎样才能让它在小型设备上运行？

Thanks

谢谢

2 个解决方案

#1

I'm updating my answer! It helped to see your actual code.

我正在更新我的答案！它有助于查看您的实际代码。

Since your menu drop down is fixed position and overflow hidden you'll never see the entire menu if it needs more screen room than it has.

由于您的菜单下拉是固定位置和溢出隐藏，如果它需要更多的屏幕空间，您将永远不会看到整个菜单。

You need to update this class with the following attributes:

您需要使用以下属性更新此类：

.navbar-collapse.in {
overflow: scroll;

}

and do not call these attributes:

并且不要调用这些属性：

max-height: none !important;
height: auto !important;

This makes the drop down menu scrollable. Adjust the height with media queries if you like, but it will work now.

这使下拉菜单可滚动。如果您愿意，可以使用媒体查询调整高度，但现在可以使用。

#2

I have made it to work. Change the following styles:

我已经成功了。更改以下样式：

.navbar-collapse.in {
    overflow: hidden; 
    max-height: none !important; 
    height: auto !important;
}

至

.navbar-collapse.in {
    /* overflow: hidden; */
    /* max-height: none !important; */
    height: auto !important;
}

#1