Question

我正试图在我的ASP.NET MVC5应用程序中放置一个侧面菜单之类的东西，但下拉菜单只是不显示。

继续，我只是从引导页面复制示例，粘贴并没有显示任何内容：

<div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <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>

创建了这个有问题的小提琴：enter link description here

也许这个问题是我必须补充的。我想要像图片一样的东西。enter image description here

Answer 1

确保在popper.js之前加载bootstrap.min.js。见下文：

 <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
      </button>    
    <div class="dropdown-menu">
        <span class="dropdown-item-text">Dropdown item text</span>
        <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>

然后，您的Javascript的顺序应如下；

jQuery
popper.js
bootstrap.js

Answer 2

您需要将菜单项包装为带有“下拉列表”类的div，并同时包含下拉按钮。

这里是一个例子：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu">
   <span class="dropdown-item-text">Dropdown item text</span>
   <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>

如果您想了解有关下拉菜单的更多信息，请点击这里链接到Bootstrap文档：Bootstrap 4 - Dropdowns

引导简单下拉列表根本不显示

2 个答案: