bootstrap navbar无法正常工作

时间：2017-09-12 19:00:42

标签： twitter-bootstrap

我是初学者，很快就遇到了麻烦。 首先，我想提一下，我从getbootstrap获得了所有代码，包括复制和粘贴，并根据我的需要进行了调整。 首先，我得到了链接和元数据（包括最新的bootstrap 4的链接，alpha版本）。然后我使用了来自getbootstrap的代码snipet，它实现了一个导航栏。我改变了我需要的东西，并使用了我所有的html文档。

现在，它总是在主页上工作，但在其他6页上它很少。我知道这听起来很奇怪，但是，是的，通常导航条在其他页面上根本不会出现，但有时它会在联系页面上出现，例如，稍后它可能会从联系页面再次消失，但在常见问题页面上会出现问题，没有任何人搞乱代码。 mabey它是一个很好的想法，以获得更老但更稳定的bootstrap版本？

这是index.html文件的代码：

    <!DOCTYPE html>
    <html lang="ro">
    <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css
integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">


    </head>


    <body>

        <h1>Hello, world!</h1>


          <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="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="servicii.html">Servicii</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="dotari.html">Dotari</a>
          </li>
            <li class="nav-item">
            <a class="nav-link" href="preturi.html">Preturi</a>
          </li>
            <li class="nav-item">
            <a class="nav-link" href="testimoniale.html">Testimoniale</a>
          </li>
            <li class="nav-item">
            <a class="nav-link" href="faq.html">Intrebari frecvente</a>
          </li>
            <li class="nav-item">
            <a class="nav-link" href="locatie.html">Locatie</a>
          </li>

        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
      </body>
    </html>

现在，这是其他一个页面的代码，我认为1就足够了，因为它们是相同的，所以我不会让你无关紧要地阅读7页代码。目前我没有任何css或js文件，因为我使用的是bootstrap。

<!DOCTYPE html>
<html lang="ro">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>



      <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="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>




      <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="servicii.html">Servicii</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="dotari.html">Dotari</a>
      </li>
        <li class="nav-item">
        <a class="nav-link" href="preturi.html">Preturi</a>
      </li>
        <li class="nav-item">
        <a class="nav-link" href="testimoniale.html">Testimoniale</a>
      </li>
        <li class="nav-item active">
        <a class="nav-link" href="faq.html">Intrebari frecvente</a>
      </li>
        <li class="nav-item">
        <a class="nav-link" href="locatie.html">Locatie</a>
      </li>

    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  </body>
</html>

1 个答案:

答案 0 :(得分：0)

好的，所以我自己想出来了。

首先，我说我使用了自举版的alpha版本4.我错了，它是测试版。

现在，答案！ 代码工作正常，这是令人沮丧的根源，因为我一次又一次地查看我知道它是核心的代码，但不知何故它没有工作。 它实际上是一个ftp错误，由于某种原因，当我将文件上传到服务器时，其他页面上的导航没有上传，因此浏览器没有显示导航，因为在服务器上有没有导航显示。

相关问题
最新问题