Bootstrap 移动菜单下拉显示为桌面版本

Question

我正在使用 OctoberCMS with a Bootstrap 菜单。

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

它应该像在 website 上一样显示，它在行中堆叠。

JS Fiddle

我已将问题缩小为 open class added/removed 从 <li class="dropdown "> 到 javascript。

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，只是在您的 fiddle 中似乎使用了 show class 而不是 open 作为 class 选择器。

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 移动菜单下拉显示为桌面版本

Bootstrap Mobile Menu Dropdown displays as Desktop version

html

javascript

css

twitter-bootstrap

octobercms