javascript - Bootstrap 下拉菜单项缺少样式

Question

如果我搜索“dropdown-item”类，即使在 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>