Question

我试图找到解决问题的方法，但没有一个完全符合我的情况。

我的问题如下：我正在尝试将Bootstrap 4导航栏添加到我的Page中，它工作正常-它正在显示。但是它没有任何点击事件，我无法单击按钮或在搜索字段中写一些东西。

我试图在加载bootstrap.css文件之前先加载jQuery，但是它也不起作用。

这是我Site.Master中的加载顺序：

<script src="/Scripts/jquery-3.3.1.js"></script>
<script src="/Scripts/umd/popper.js"></script>
<script src="/Scripts/bootstrap.js"></script>

<script src="/epadoc_Framework/EHR/Scripts/js/FontSize.js"></script>
<script src="/Scripts/global.js"></script>

<script src="/epadoc_Framework/EHR/Scripts/pk_script.js"></script>

<link href="/Content/bootstrap.css" rel="stylesheet" type="text/css"/>

这也是正确的Bootstrap版本。这是一些默认的导航栏，以测试其是否正常工作（只是从Bootstrap复制而来）：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

这就是页面标题中的样子：

您可以看到它正常显示，但是我无法与之交互，当我将鼠标悬停在该栏上时，我什至都没有获得悬停效果。

有什么想法吗？

Answer 1

尝试像这样将.css放在文档的开头。

<!DOCTYPE html>
<html lang="en">
<head>
<link href="/Content/bootstrap.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>
//Your content

<script src="/Scripts/jquery-3.3.1.js"></script>
<script src="/Scripts/umd/popper.js"></script>
<script src="/Scripts/bootstrap.js"></script>

<script src="/epadoc_Framework/EHR/Scripts/js/FontSize.js"></script>
<script src="/Scripts/global.js"></script>

<script src="/epadoc_Framework/EHR/Scripts/pk_script.js"></script>
</body>

C＃Bootstrap Navbar没有响应

1 个答案: