Question

我最近使用bootstrap3.1，我想使用“下拉菜单”，这里是官方文档：http://getbootstrap.com/components/#dropdowns

代码非常简洁，如下所示：

    <div class="dropdown">
  <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

但不管怎么说它不起作用，你可以在这里查看：http://jsfiddle.net/52DDe/1/

有什么东西我忘了加载吗？

感谢，

++++++++++++++++++++++++++++++++++++++++++

现在通过添加css解决问题：

注意：

要解决此问题，CSS需要设置：

.test>.dropdown>.dropdown-menu
{
    display: block;
    margin-bottom: 5px;
    position: static;
}

并使用div：

<div class="test">
.....
</div>

Answer 1

删除“仅限sr”类，代码将起作用。

http://v3.bootcss.com/javascript/#dropdowns可能会有所帮助，虽然它是中文的。

查看what-is-sr-only-in-bootstrap-3了解更多关于“仅限sr”的信息。

Answer 2

在我的情况下，我删除了bootstrap.min.js的链接，它包含在dropdown.js之前，它对我有用。

Dropdown看起来像是跟随的（只有很少的百万美元代码可以忽略）：

<div class="dropdown pull-right">
    <button id="dropdownProperties" class="btn btn-primary 
        dropdown-toggle" type="button" data-toggle="dropdown" 
        aria-haspopup="true" aria-expanded="false"
    >
        Immobilien <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li th:each="property : ${properties}">
            <a href="#" >
                <span th:text="${property.address.street}">ADRESSE</span>
            </a>
        </li>
    </ul>
</div>

Bootstrap下拉菜单未显示

2 个答案: