Question

我的代码似乎有什么问题...我是bootstrap中的新手，我按照网站上的所有说明如何创建引导下拉列表但仍然没有显示在我的下拉列表中的下拉项目

我的代码：

//Calling Bootstrap CSS and Javascript

  <link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen" />
  <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="screen" >
  <link rel="stylesheet" href="css/bootstrap-responsive.min.css" type="text/css" media="screen" >
  <link rel="stylesheet" href="css/bootstrap-responsive.css" type="text/css" media="screen" >
  <script src="js/bootstrap.js"></script>
  <script src="js/bootstrap.min.js"></script>


 <script>
 $('.dropdown-toggle').dropdown()
 </script>

<div class="btn-group">
  <button type="button"  class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

感谢您的帮助

Answer 1

首先缺少jQuery。

其次，在呈现DOM之前，您正在调用$('.dropdown-toggle').dropdown()。

此外，您只应加载1个文件。 bootstrap.css或bootstrap.min.css。加载两者只是浪费资源。

JSFiddle

＆＃13;

$('.dropdown-toggle').dropdown()

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"></link>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

＆＃13;

如何创建Bootstrap下拉列表？

1 个答案: