Question

任何人都可以告诉我下拉按钮有什么问题。它不适用于我的Chrome。这是我的HTML代码 -

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
<title>IconMaker</title>
<meta charset=utf-8">
<meta name= "viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
  <h1>My Bootstrap Page</h1>
  <p>Resize the page to understand Responsiveness</p> 
</div>
<div class="container">
	<div class="dropdown">
		<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Post Ideas
		<span class="caret"></span></button>
		<ul class="dropdown-menu">
		  <li><a href="#">Work 1</a></li>
		  <li><a href="#">Work 2</a></li>
		  <li><a href="#">Work 3</a></li>
		  <li><a href="#">Work 4</a></li>
		</ul>
	</div>
	<div class="row">
		<div class="col-sm-2">
		<p>If you want to use Paypal</p>
		<i class="fa fa-cc-paypal" style="font-size:36px"></i>
		</div>
		<div class="col-sm-2">
		<p>If you want to use Mastercard</p>
		<i class="fa fa-cc-mastercard" style="font-size:36px"></i>
		</div>
		<div class="col-sm-2">
		<p>If you want to use Visa</p>
		<i class="fa fa-cc-visa" style="font-size:36px"></i>
		</div>
		<div class="col-sm-2">
		<p>If you want to use Google Wallet</p>
		<i class="fa fa-google-wallet" style="font-size:36px"></i>
		</div>
		<div class="col-sm-2">
		<p>If you want to use American Express</p>
		<i class="fa fa-cc-amex" style="font-size:36px"></i>
		</div>
	</div>
</div>
</body>
</html>

＆＃13;

当我点击下拉列表时，没有任何内容掉落。我在控制台上看到没有错误。我在html中添加了bootstrap.js。我是否必须使用JavaScript文件？

Answer 1

使用此链接

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

而不是

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

因为你在css中使用版本4.0.0-beta而在javascript中使用另一个版本

Answer 2

您忘记添加以下css

.show > .dropdown-menu {
  display: block;
}

html下拉按钮不起作用

2 个答案: