Bootstrap Dropdown没有样式

时间:2014-01-03 20:20:18

标签: html css twitter-bootstrap-3

我正在使用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也是如此。

4 个答案:

答案 0 :(得分:3)

包含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。

答案 1 :(得分:0)

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

screenshot

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

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