Question

我在navbar上有一个下拉列表（包含15-20项）。移动电话上看不到所有下拉项目。

我在bootstrap.css内部尝试过：

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

它无效。（ Bootstrap v3.0.3 ）

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>

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

由于

Answer 1

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

BehaviorSubject

到

refresh()

Answer 2

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

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

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

.navbar-collapse.in {
overflow: scroll;

}

并且不要调用这些属性：

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

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

小型设备中的Bootstrap下拉菜单

2 个答案: