【问题标题】:html drop-down button not workinghtml下拉按钮不起作用
【发布时间】:2017-08-22 15:52:40
【问题描述】:

谁能告诉我下拉按钮有什么问题。它在我的 chrome 中不起作用。 这是我的html代码-

<!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>

当我单击下拉菜单时,没有任何内容会下拉。我在控制台上没有看到任何错误。我在 html 中添加了 bootstrap.js。我必须为此使用 JavaScript 文件吗?

【问题讨论】:

  • 为什么在 4.0.0-beta 版和 JS 版 3.3.7 中包含了 bootstrap 的 CSS?将其包含在同一版本中并再次测试。

标签: javascript html css twitter-bootstrap bootstrap-modal


【解决方案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 中使用另一个版本

【讨论】:

    【解决方案2】:

    你忘了添加下面的css

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

    【讨论】:

    • 我认为这不是问题的原因。问题导致不同版本
    • 如果你阅读了 bootstrap 4.0 的文档,你可以看到 css 是 .show&gt;.dropdown-menu { display: block; } 你能重新检查一下吗
    猜你喜欢
    • 1970-01-01
    • 2015-06-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-03-18
    • 1970-01-01
    • 2014-05-17
    • 1970-01-01
    相关资源
    最近更新 更多