Bootstrap导航无效

时间:2018-02-12 07:01:05

标签: css twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

当我试图给类导航栏导航栏时,

Bootstrap无法正常工作 - 它在这里工作我将提供代码。 我的cosole错误是Uncaught TypeError:无法读取属性' fn'在setTransitionEndSupport中未定义。



<html ng-app="myApp">

<head>
  <title></title>
  <meta charset="utf-8" />
  <link href="Content/bootstrap.css" rel="stylesheet" />
  <script src="scripts/bootstrap.js"></script>
</head>

<body>
  <div class="container">
    <div role="navigation" class="navbar navbar-inverse">
      <ul class="nav navbar-nav">
        <li><a href="#/home">Home</a></li>
        <li><a href="#/add">Add</a></li>
        <li><a href="#/edit">Edit</a></li>
        <li><a href="#/delete">Delete</a></li>
      </ul>
    </div>
    <div ng-view></div>
    <script src="scripts/angular-min.js"></script>
    <script src="scripts/angular-route.js"></script>
    <script src="demo.js"></script>
  </div>
</body>

</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:4)

如你所说,你正在使用bootstrap 4而你使用bootstrap 3的navbar,所以它无法正常工作。我添加了bootstrap 4及其工作的导航代码。请查看以下代码段

&#13;
&#13;
<html ng-app="myApp">

<head>
  <title></title>
  <meta charset="utf-8" />
  <link href="Content/bootstrap.css" rel="stylesheet" />
  <script src="scripts/bootstrap.js"></script>
   <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> 
</head>

<body>
  <div class="container">
 
    
<nav class="navbar navbar-expand-sm bg-light navbar-light">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
   
  </ul>
</nav>
   
    <div ng-view></div>
    <script src="scripts/angular-min.js"></script>
    <script src="scripts/angular-route.js"></script>
    <script src="demo.js"></script>
  </div>
</body>

</html>
&#13;
&#13;
&#13;

或检查here