Question

这是我的代码，但是我想要放在按钮内的东西不会进入它内部，而是它出现在按钮之外。任何帮助都会非常感激。 This is the pic of what is happening

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  
  .dropbtn {
  background-color: #d90000;
  color: "white";
  padding: 16px;
  border; #ffffff
  cursor: pointer;
  }
  .dropdown { position: relative;
  display; inline-block;
  }
  .dropdown content { diplay: none;
  position: absolute;
  bacground-color:#f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0,0.2);
  }
  .dropdown-content a { color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  }
  .dropdown-content a:hover {background-color: #b30000}
  .dropdown:hover .dropbtn {display: block;
  }
  .dropdown:hover .dropbtn { background-color:#3e8e41;
  }
  

</head>
<body>
<div class="well well-sm">
  <h2>Quick Travel</h2>
  <div class="dropdown">
  <button class="dropbtn">Tutorials </button>
  <div class="dropdown-content">
  <a href="#">begginer</a>
  <a href="#">Advance</a>
  <a href="#">Specials </a>
  </div>
  </div>
  </div>
</body>
</html>

＆＃13;

Answer 1

试试这个：

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Tutorials     </button>
    <ul class="dropdown-menu">
        <li><a href="#">begginer</a></li>
        <li><a href="#">Advance</a></li>
        <li><a href="#">Specials</a></li>
    </ul>
</div>

css中的下拉按钮不起作用

1 个答案: