Bootstrap Dropdown没有样式

Question

我正在使用bootstrap 3的模板工作，下拉菜单看起来很复杂，我不明白。

        <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://prntscr.com/2g8507复制它。我的浏览器是空的，不知道为什么。检查元素出错0。 CSS文件已连接，js也是如此。

Answer 1

包含css和js文件，然后你必须使用适当的结构。

演示：http://jsfiddle.net/Rj8Nd/3/

  <ul class="nav nav-pills">
    <li class="dropdown">
      <a id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a>
      <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
        <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>
    </li>
  </ul>

另外要小心在你的网站上的bootstrap.js之前加入jquery。

Answer 2

首先，你还没有加载bootstrap，所以它看起来不会很漂亮。它显示效果不错，但我不确定你的“浏览器空”是什么意思......看起来对我来说这样：

Answer 3

当我忘记在bootstrap.js之前包含JQuery时，这看起来像是一个问题

包括Jquery吗？它是在bootstrap之前加载的吗？

Answer 4

如果删除课程sr-only，您就会看到它。 sr-only将高度/宽度设置为1px并执行一些非常奇怪的隐藏活动。