2017-12-31 146 views
1

lade ich bin neu in Bootstrap und ich vor kurzem eine ihrer Vorlagen verwendet, funktioniert alles gut, aber meine navbar ist nicht richtig geladen, es sollte wie folgt aussehen: What i Should be gettingBootstrap navbar nicht richtig

Aber es sieht aus wie dies sowohl in chrome und Firefox: What I get

und das ist mein html (nur der nav Teil)

<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
     <div class="container"> 
 
      <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#">Project name</a> 
 
      </div> 
 
      <div id="navbar" class="collapse navbar-collapse"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="active"><a href="#">Home</a></li> 
 
       <li><a href="#about">About</a></li> 
 
       <li><a href="#contact">Contact</a></li> 
 
      </ul> 
 
      </div><!--/.nav-collapse --> 
 
     </div> 
 
     </nav>
Können Sie mir bitte helfen?

Antwort

0

Es sieht für mich so aus, als würde Ihr CSS nicht korrekt geladen. Versuchen Sie, diese zu Ihrer Seite <Kopf> von http://getbootstrap.com/docs/3.3/getting-started/#download:

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Es ist nur eine Kopie von Bootstrap. Wenn das funktioniert, dann wissen Sie, dass das Problem bei Ihrer lokalen Kopie liegt (wenn Sie eine oder Ihre CDN verwenden). Wenn dies nicht der Fall ist, liegt das Problem an anderer Stelle.

EDIT: Ich sollte bearbeiten, um zu sagen, dass ich den Code getestet habe, den Sie auf einer anderen Website zur Verfügung gestellt haben, und es scheint gut zu funktionieren.

+1

Ich glaube nicht importieren 'Bootstrap-theme' notwendig ist. Sie können auch jQuery oben importieren, damit die Menüschaltfläche auf mobilen Bildschirmen funktioniert. –

+0

Vielen Dank, es hat mit 3.3 aus irgendeinem Grund funktioniert! –

0

funktioniert auf jsfiddle:

https://jsfiddle.net/ajrvrtz6/ 

I verwendet: butstrap v3.3

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/…; integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg‌​4Va+PmSTsz/K68vbdEjh‌​4u" crossorigin="anonymous"> 
<!-- Latest compiled and minified JavaScript --> 
<script src="maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/…; integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mC‌​WNIpG9mGCD8wGNIcPD7T‌​xa" crossorigin="anonymous"></script> 
Verwandte Themen