Question

我在Bootstrap官方网站上使用alpha版本Bootstrap 4尝试了以下示例。但是下拉项目不像超链接：

<div class="dropdown open">
            <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <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>

我尝试将类disabled或btn-link添加到下拉列表项中，但项目仍未显示为链接。我正在寻找一个解决方案没有 JavaScript

Answer 1

只需添加以下CSS，然后它就会显示为hyperlinks。

.dropdown-item{
   color:blue;
   text-decoration:underline;
}

感谢。

Answer 2

感谢Bootstrap严格的移动友好理念。没有简单的方法可以做到这一点。特别是不使用Javascript。

大多数使用Bootstrap 3.0的网站使用自己的菜单系统，而不是Bootstrap菜单。首先，因为无法点击的父菜单项。并且仅支持1级下拉列表。

无论如何都试试这个！将"raw string"替换为button标记。并将整个下拉列入a或任何其他标记。

li

并添加相应的CSS。

<div class="dropdown open"><li>
        <a class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <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></li>
    </div>

这不是适用于您的要求的确切代码，但我希望您明白这一点。

如何使Bootstrap下拉项目成为超链接

2 个答案: