Bootstrap 4 移动页面加载时导航栏折叠 (Laravel/laravel-mix)

Question

好吧，我现在不确定要转弯，因为这对我来说完全没有意义。

我正在使用最新版本的 Laravel 和 Laravel Mix，这可能相关也可能不相关。

我已经更新 Laravel 以使用最新的 Bootstrap 4 Alpha 并具有以下依赖项：

"axios": "^0.16.2",
"bootstrap": "^4.0.0-alpha.6",
"cross-env": "^5.0.1",
"jquery": "^3.1.1",
"laravel-mix": "^1.0",
"lodash": "^4.17.4",
"vue": "^2.1.10",
"tether": "^1.4.0",
"popper.js": "^1.11.0"

这里的所有内容都是正确的版本。

我更新了我的 bootstrap.js 以包含正确的 bootstrap 模块和新需要的模块：

try {
    window.$ = window.jQuery = require('jquery');

    window.Tether = require('tether');
    window.Popper  = require('popper.js').default;
    require('bootstrap');
} catch (e) {}

我还更正了 app.scss 中的 SCSS 路径：

@import "node_modules/bootstrap/scss/bootstrap";

现在的问题是，当我在运行 npm run dev 之后加载应用程序时，导航栏折叠了...就像在移动设备上一样，但我正在台式机上进行测试。

现在它变得更奇怪了，因为如果我从 Bootstrap CDN 中包含 bootstrap.min.css，那么它就可以正常工作。

虽然我不想这样做，但显然我最终可能不得不这样做，因为我不知道问题出在哪里。

我尝试了各种方法，例如注释掉我所有的自定义 CSS、Javascript、多次重新安装 node_modules 等。我现在迷路了。

编辑：我也试过在使用 app.css 文件时使用默认的 Bootstrap 导航栏，但它仍然不起作用。同样，如果我改用 CDN，工作正常。

Answer 1

@Jake，我猜你正在获取 bootstrap4.0.0-beta 并尝试使用与 bootstrap4.0.0-alpha.6.

相关的标记和类

如果您卸载 bootstrap 和运行 npm install bootstrap@4.0.0-alpha.6--save --save-exact，您的代码应该可以工作。

或

您可以将此代码用于您当前项目中的导航栏，看看它是否正常工作。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Bootstrap 4 移动页面加载时导航栏折叠 (Laravel/laravel-mix)

Bootstrap 4 Navbar Collapsed for Mobile on Page Load (Laravel/laravel-mix)

laravel

bootstrap-4

laravel-mix