Bootstrap下拉按钮问题

时间:2015-06-08 23:09:26

标签: javascript jquery html css twitter-bootstrap

所以我刚刚开始使用bootstrap,当我尝试在每个Getbootstrap的组件页面上放置示例时,该按钮并不像宣传的那样工作。我已经看到并且现在尝试了许多不同的解决方案来解决这个问题,这让我觉得我可能在想这里有什么问题。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rubish</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">   </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="maindev1.0.0.css" />
<link rel="stylesheet" type="text/css" href="navbardev1.0.0.css" />
</head>
<body>
<div class="navbar-header pull-right">
<button id="menubutton" class="btn btn-default btn-md dropdown-toggle" data-toggle="dropdown" 
type="button" aria-expanded="false"><span class="glyphicon glyphicon-list"></span> </button>
</div>
<ul class="dropdown-menu" role="menu">
    <li><a href="#">yadayada</a>
    </li>
    <li class="divider"></li>
    <li><a href="#">yadayada</a>
    </li>
    <li class="divider"></li>
    <li><a href="#">yadayada</a>
    </li>
    <li class="divider"></li>
    <li><a href="#">yadayada</a>
    </li>
    <li class="divider"></li>
    <li><a href="#">yadayada</a>
    </li>

</ul>


</body>

</html>

我可以让按钮显示,当我点击它时看起来它是活动的,但是它无法显示下拉列表。我已经尝试过使用Safari,Chrome和Firefox,但三者都有相同的结果。有什么我忘记了吗?

2 个答案:

答案 0 :(得分:0)

您不会说它是在导航栏中还是仅在正常导航栏中。从您的代码看起来您​​正在尝试顶部在导航栏中执行此操作。我还包括一个普通的下拉按钮。

小提琴:https://jsfiddle.net/DTcHh/8607/

if (DefaultGasolineEngine *dge = dynamic_cast<DefaultGasolineEngine*>(car->engine()))
  dge->setSparkVoltage(1000);

答案 1 :(得分:0)

select {background-color: blue; color: white; border: 2px solid; border-radius: 6px;} 
<select name="yada">
<option value="yada">yada</option>
<option value="yada">yada</option>
<option value="yada">yada</option>
<option value="yada">yada</option>
</select>

为什么不用这样的下拉列表替换按钮,然后将其设置为看起来像按钮?