Question

当浏览器缩小到移动设备时，下拉菜单仍显示为桌面气泡。

它应该像它在website上的行一样显示。

JS Fiddle

我已将此问题缩小为javascript在open添加/删除的<li class="dropdown ">类。

HTML菜单

<nav id="layout-nav" class="navbar navbar-inverse navbar-fixed-top navbar-autohide" 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="collapse navbar-collapse">

            <ul class="nav navbar-nav navbar-left">
                <li class="active">
                    <a href="#">Home</a>
                </li>

                <li>
                    <a href="#">About</a>
                </li>

                <li class="dropdown ">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                      Blog <i class="icon-chevron-down"></i>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-item">
                            <a href="#">Category 1</a>
                        </li>
                        <li class="dropdown-item">
                            <a href="#">Category 2</a>
                        </li>
                        <li class="dropdown-item">
                            <a href="#">Category 3</a>
                        </li>  
                    </ul>
                </li>

                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>

        </div>
    </div>
</nav>

CSS

我以应用OctoberCMS css主题为例来设置菜单样式。

https://octobercms.com/themes/website/assets/css/theme.css

JS

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.js

更新：OctoberCMS也可能正在使用这些文件https://github.com/rainlab/vanilla-theme/tree/master/assets/vendor/bootstrap/js

Answer 1

我只是在他们的网站上添加了相同的CSS，除了在您的小提琴中似乎使用show类而不是open作为类选择器。

js fiddle solution

<强> CSS

@media (max-width: 767px) {
  .navbar-nav .show .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }
}

Bootstrap Mobile Menu Dropdown显示为Desktop版本

1 个答案: