Question

如果我搜索了该类＆＃34; dropdown-item＆＃34;，即使在bootstrap.css或.js中也没有结果。这堂课在哪里？

这是我得到的：

使用以下代码：

        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Action
            </button>
            <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>
        </div>

我的脚本也按正确的顺序排列：

<script src="scripts/jquery-3.1.0.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>

和css：

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

所有其他控件（导航栏，按钮，按钮组等）都运行良好，因此bootstrap似乎已正确初始化。

Answer 1

您需要在下拉列表中使用ul和li元素。查看您的工作CODE HERE及以下。

<div class="dropdown">
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
             <li><a class="dropdown-item" href="#">Another action</a></li>
             <li><a class="dropdown-item" href="#">Something else here</a></li>
             <div class="dropdown-divider"></div>
             <li><a class="dropdown-item" href="#">Separated link</a></li>
        </ul>
    </div>
</div>

Answer 2

您需要添加一个类"dropdown"的容器div，这里是bootstrap网站的示例：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

正如您所看到的，包装器div上有一个dropdown类，您不会错过。

干杯

Bootstrap下拉菜单项缺少样式

2 个答案: