Question

我正在尝试在我的ASP网络应用程序中使用自定义Bootstrap主题，但这样做会导致下拉停止工作。这就是我正在做的再现问题。

1）我创建了一个新的ASP.NET Web App，我只检查了MVC。

2）我编辑Index.cshtml以包含来自Bootswatch的以下标签导航代码段。

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <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 class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade show active" id="home">
    <p>Raw denim you probably haven't heard.</p>
  </div>
  <div class="tab-pane fade" id="profile">
    <p>Food truck fixie locavore, accusamus.</p>
  </div>
  <div class="tab-pane fade" id="dropdown1">
    <p>Etsy mixtape wayfarers, ethical.</p>
  </div>
  <div class="tab-pane fade" id="dropdown2">
    <p>Trust fund seitan letterpress, .</p>
  </div>
</div>

到目前为止，调试时一切正常。

3）我右键单击Content文件夹并添加一个先前从here下载的现有项bootstrap-spacelab.css。

4）然后我在BundleConfig.cs中更改以下条目

    bundles.Add(new StyleBundle("~/Content/css").Include(
              "~/Content/bootstrap.css",
              "~/Content/site.css"));

引用新文件

    bundles.Add(new StyleBundle("~/Content/css").Include(
              "~/Content/bootstrap-spacelab.css",
              "~/Content/site.css"));
}

现在，当我运行应用程序时，会应用Spacelab的外观，但下拉不再有效。有没有猜到我做错了什么？

编辑：

引导脚本引用未更改为

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

Answer 1

试试这个，看看它是否对你有帮助。

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" id="dropdown_target" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu" aria-labelledby="dropdown_target">
......

自定义Bootstrap主题导致下拉停止工作

1 个答案: