Nie jestem w stanie stworzyć paska nawigacyjnego, próbowałem innych klas bootstrapu i działają dobrze. Proszę coś zasugerować?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description"
         content="">
    <meta name="keywords"
          content="">
         
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="stylesheet.css?v=<?php echo time(); ?>">
</head>
<body id="body">
    <nav class="navbar navbar-default">
        <div class="container-fluid"> 
            <ul class="nav navbar-nav">
               <li class="active"><a href="">Home</a></li>
            </ul>
        </div>
    </nav>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
0
shreyansh saxena 29 sierpień 2020, 08:13

2 odpowiedzi

Najlepsza odpowiedź

Dokładnie sprawdź zajęcia. Udało mi się go uruchomić zgodnie z dokumentacją tutaj: https://getbootstrap.com/docs/4.0/components/navbar/

Twoje zajęcia są wyłączone, ponieważ mogłem wykorzystać wszystko inne w twoim kodzie.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description"
             content="">
        <meta name="keywords"
              content="">
             
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="stylesheet.css?v=<?php echo time(); ?>">
    </head>
    <body id="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>
     
    </ul>
  </div>
</nav>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>
    </html>
1
finiteloop 29 sierpień 2020, 05:28

Używasz niewłaściwego kodu dla Bootstrap 4.x. Twój kod działa na bootstrap 3.x

Jeśli chcesz używać paska nawigacyjnego najnowszej wersji programu bootstrap, użyj tego.

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid"> 
   <ul class="navbar-nav">
     <li class="nav-item active">
       <a href="" class="nav-link">Home</a>
     </li>
  </ul>
</div>

Aby uzyskać więcej informacji, zobacz Bootstrap Navbar

0
shrishail sh 29 sierpień 2020, 05:36