Question

我正在使用asp.net mvc。我需要在视图中添加下拉按钮，但它无法正常工作。我也包括了这个库。

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />

<div class="row">
        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Location
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
            </div>
        </div>
        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Sort By
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenu3">
                <button class="dropdown-item" type="button">Action</button>
                <button class="dropdown-item" type="button">Another action</button>
                <button class="dropdown-item" type="button">Something else here</button>
            </div>
        </div>
</div>

我也加了这个。

<script src="~/Scripts/jquery-3.3.1.slim.js"></script>
<script src="~/Scripts/popper.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

Answer 1

在这种情况下，参考顺序很重要

参考顺序必须如下：

 <script src="~/Scripts/jquery-3.3.1.min.js"></script>
 <script src="~/Scripts/bootstrap.min.js"></script>
 <script src="~/Scripts/popper.js"></script>
 <link href="~/Content/bootstrap.min.css" rel="stylesheet" />

必须在CSS

之前引用脚本

Answer 2

在BundleConfig.cs文件中，将〜/ bundles / bootstrap更改为使用bootstrap.bundle.min，因为其中包括对popper utils的引用：

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.bundle.min.js",
                  "~/Scripts/respond.js"));

Bootstrap 4下拉按钮在mvc视图中不起作用

2 个答案: