bootstrap navbar funktioniert nicht richtig

-2

Ich bin neu Bootstrap und fand mich sehr schnell in Schwierigkeiten. zuerst möchte ich erwähnen, dass ich den ganzen Code von getbootstrap, mit Kopieren und Einfügen, und abgestimmt es auf meine Bedürfnisse hatte. Also zuerst habe ich die Links und Metadaten (einschließlich der Link zu den neuesten Bootstrap 4, die Alpha-Version). dann habe ich ein code snipet von getbootstrap benutzt, das eine nav bar implementiert. Ich änderte, was ich brauchte, und benutzte alle meine HTML-Dokumente.bootstrap navbar funktioniert nicht richtig

Jetzt funktioniert es immer auf der Homepage, aber auf den anderen 6 Seiten tut es selten. Ich weiß, das hört sich merkwürdig an, aber ja, normalerweise erscheint die Nav-Leiste gar nicht auf den anderen Seiten, aber manchmal erscheint sie auf der Kontaktseite, später verschwindet sie vielleicht wieder von der Kontaktseite, aber auf der FAQ-Seite erscheint sie und ohne dass jemand mit dem Code herumhantiert. mabey, es ist eine gute Idee, eine ältere, aber stabilere Bootstrap-Version zu bekommen?

hier der Code der Datei index.html ist:

<!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>

Und nun, hier ist der Code auf einer der anderen Seiten, ich glaube, 1 genug ist, da sie über die gleiche Sache sind, so Ich lasse dich nicht sieben Seiten Code für nichts lesen. Im Moment habe ich keine CSS- oder JS-Dateien seit ich Bootstrap benutze.

<!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>

Quelle

2017-09-12 Bogdan

Bitte lesen Sie dies, bevor Sie Fragen stellen: https://stackoverflow.com/help/how-to-ask – ZimSystem

Willkommen bei StackOverflow. Bitte geben Sie Ihren Code an und schreiben Sie das Problem, mit dem Sie konfrontiert sind. Wir können Ihnen danach helfen. –

Ok, also habe ich es selbst herausgefunden.

Zunächst habe ich festgestellt, dass ich die Alpha-Version von Bootstrap 4 verwendet habe. Ich lag falsch, es ist die Beta-Version.

jetzt die Antwort! der Code funktioniert gut, und das war die Quelle der Frustration, weil ich immer wieder in einen Code sah, dass ich wusste, es war cortect, aber irgendwie hat es nicht funktioniert. es war tatsächlich ein FTP-Fehler, aus irgendeinem Grund, als ich die Dateien auf den Server hochgeladen, die nav auf den anderen Seiten wurden nicht hochgeladen, so Corse der Browser zeigte nicht das Nav, weil auf dem Server gab es keine Nav zu zeigen.

Quelle

2017-09-13 15:57:37 Bogdan

bootstrap navbar funktioniert nicht richtig

Antwort

Verwandte Themen