Question

我正在尝试使用引导程序4中的导航栏。为此，我知道需要一些依赖项。 Bootstrap CSS和JS。 Popper Js和Jquery。

这是我拥有的代码示例，它正在jsFiddle中运行。这就是为什么我认为导入效果不佳的原因，因为在我的symfony项目中，下拉列表不起作用。菜单上都没有，折叠的3行菜单也没有。

<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
    <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 dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </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="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

我使用npm和yarn来处理依赖关系。

这是我的package.json。如果有什么问题，我想是在这里。

{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.22.0",
        "jquery.js": "0.0.2-security",
        "node-sass": "^4.11.0",
        "popper.js": "^1.14.6",
        "sass-loader": "^7.0.1",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    },
    "dependencies": {
        "bootstrap": "^4.2.1",
        "jquery": "^3.3.1"
    }
}

要构建，我使用命令yarn encore dev

这是我用于构建的app.js。

require('popper.js');
// Need jQuery? Install it with "yarn add jquery", then uncomment to 
require it.
const $ = require('jquery');


require('bootstrap');

感谢您的帮助，希望您能看到这些导入中的错误。

在我的node_modules中，我有一个jquery和一个jquery.js，但看起来我只需要jquery。如果我尝试使用jquery.js，则构建时会出错。

Popper或Jquery导入未按预期工作

0 个答案: