dropdown-toggle在Bootstrap 3.3.7中不起作用

时间:2019-07-05 06:18:23

标签: html twitter-bootstrap-3

我正在使用引导程序3.3.7,并且我有一个navbar。一切都很好,但是当我单击dropdown菜单项时,我看不到sub-menu。下面是我的代码。

<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#"/>
        </div>
        <ul class="nav navbar-nav">
            <li>
                <a href="/">View Library</a>
            </li>
            <li>
                <a href="{{route('reports.create')}}">Create</a>
            </li>

            <li class="dropdown">

                <a href="#" class="dropdown-toggle" data-toggle="dropdown" 
                role="button" aria-haspopup="true" aria-expanded="true">Setup<span class="caret"/>
                </a>
                <ul class="dropdown-menu" aria-labelledby="about-us">
                    <li>
                        <a href="#">Our Story</a>
                    </li>
                    <li>
                        <a href="#">Our Team</a>
                    </li>
                    <li>
                        <a href="#">Contact Us</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav> 

我在这里做错了什么。请引导我。

3 个答案:

答案 0 :(得分:0)

检查标题,它对我有用。enter image description here

答案 1 :(得分:0)

Try this one,

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#"></a>
      </div>
      <ul class="nav navbar-nav">
      <li><a href="/">View Library</a></li>
      <li><a href="{{route('reports.create')}}">Create</a></li>

      <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" 
            role="button" aria-haspopup="true" aria-expanded="true">Setup<span class="caret"></span></a>
          <ul class="dropdown-menu" aria-labelledby="about-us">
            <li><a href="#">Our Story</a></li>
            <li><a href="#">Our Team</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
      </li>


      </ul>
    </div>
  </nav> 

答案 2 :(得分:0)

您可能会忘记为引导添加js。请将其添加到您的index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> 
</script>