导航栏高度自动不适用于移动视图中的下拉菜单答案

【问题标题】：Navbar height auto not working for dropdown menu in mobile view导航栏高度自动不适用于移动视图中的下拉菜单
【发布时间】：2017-03-12 18:59:48
【问题描述】：

导航栏有两个下拉菜单。在移动视图中，首先下拉工作正常（高度：自动工作）。但是第二个下拉列表在按钮组和高度中，而不是展开（高度：自动在这种情况下不起作用）。我的情况与this post 相同。第二个下拉菜单将动态创建。所以我认为这可能是不响应 height:auto 的原因。

正如您在第一张图中看到的，当我打开第一个下拉菜单时，height:auto 会扩展到最大高度 340 像素。但是当我在同一个导航中打开第二个下拉菜单时，高度自动不会扩展。这里的高度只有大约 122 像素

代码是，

<div class="navbar-collapse in" id="vehicle-group-navbar" style="height: auto;">
    <ul class="nav navbar-nav">
        <li class="dropdown open"><a href="#" class="dropdown-toggle"
data-toggle="dropdown">Select Group <b class="caret"></b></a>
            <ul class="dropdown-menu" id="customerGroups">......</ul>
   </ul>   <!-- first dropdown -->

<!-- second dropdown -->    
<div class="btn-group bootstrap-select nav navbar-nav dropdown fit-width label 
    label-info"><button type="button" class="btn dropdown-toggle plain"
    data-toggle="dropdown" data-id="vehiclesDropdown" title="Select Asset">
    <span class="filter-option pull-left">Select Asset</span><span class="caret">
   </span></span></button><div class="dropdown-menu open"
   style="max-height: 354px; overflow: hidden;">.....</div>

【问题讨论】：

标签： html css twitter-bootstrap drop-down-menu

【解决方案1】：

您的属性中有style="height:auto"。你试过关掉它吗？

【讨论】：

height:auto 适用于第一个下拉菜单。即使我尝试了这个 <div class="navbar-collapse in" id="vehicle-group-navbar" style="height: none !important;"> ，最初它也在 height:none 中。但是当我打开下拉菜单时，sytle 会动态更改为height:auto。
属性高度没有属性none。看w3c specification
hmm 实际上，即使我在单击导航栏图标时将高度更改为任何固定值（hegiht：200px），它也会更改为 height:auto
所以这是 JS 事件“点击”的结果。尝试查找并将其修复到您的 JS 文件中。