Question

我正在使用嵌套按钮组和下拉菜单，并按照W3schools的教程进行操作。并且不会显示下拉菜单，代码为Nirvana和珍珠果酱。

<div class="container">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">POP</button>
    <button type="button" class="btn btn-primary">Rock</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Grunge <span class="caret"></span></button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Nirvana</a></li>
        <li><a href="#">Pearl Jam</a></li>
      </ul>
    </div>
  </div>
</div>

Answer 1

试试这个请包含所有这些

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 2

好像你没有在你的html文件中包含“bootstrap.js”。

Answer 3

<!DOCTYPE html>
<html>
<head>
    <title>

    </title>

    <style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="container">
    <div class="dropdown">
      <button class="dropbtn">Pop</button>
      <div class="dropdown-content">
        <a href="#">Pop 1</a>
        <a href="#">Pop 2</a>
        <a href="#">Pop 3</a>
     </div>
    </div>
    <div class="dropdown">
      <button class="dropbtn">Rock</button>
      <div class="dropdown-content">
        <a href="#">Rock 1</a>
        <a href="#">Rock 2</a>
        <a href="#">Rock 3</a>
       </div>
</div>
</div>
</body>


</html>

这段代码没有引导程序，但你的类名是bootstrap类，所以你可以使用我的代码而不需要bootstrap，或者你可以在你的代码中包含bootstrap。他们俩都会工作。

没有显示下拉菜单

3 个答案: