移动设备上的Bootstrap菜单下拉显示为桌面版本

Question

我正在使用 OctoberCMS 和一个 Bootstrap 菜单。

当浏览器缩放到移动端时，下拉菜单仍然显示为桌面气泡。

它应该像他们的 网站 上一样，在行中堆叠。

---

JS Fiddle

https://jsfiddle.net/Ldm1p63r/

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

---

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

- Matt McManis

Answer 1

我只是添加了与他们网站相同的CSS，只不过在你的代码片段中似乎使用了 show 类而不是 open 作为类选择器。

js fiddle 解决方案

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;
  }
}

- S. H.

---

我发现的另一个问题是 Bootstrap JS 应该在 HTML 中切换那个类，但是失败了。这是因为 HTML 菜单使用的是 Bootstrap 版本 3.3.7，而我使用的是 4.1.1。我还删除了十月份 /vendor 目录中包含的 Bootstrap 文件，并从 cdnjs 中使用了一个文件，在网站上解决了这个问题。 - Matt McManis