Bootstrap Navigationsleiste Liste ist eher gestapelt als neben

Ich versuche, eine grundlegende Bootstrap Navigationsleiste Beispiel auszuführen:Bootstrap Navigationsleiste Liste ist eher gestapelt als neben

<body> 
<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
    </div> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
    </ul> 
    </div> 
</nav> 
</body>

Blick auf das, was in der CodePen passiert (was hat Bootstrap installiert ist). Warum stapeln sich die Objekte in der Navigationsleiste übereinander und sitzen nicht nebeneinander?

Quelle

2017-02-13 RubyNoob

Sie verwenden Bootstrap 4 (im Codepen) und die Navigationsleiste hat sich geändert. Wenn Sie einen einfachen horizontalen (nicht kollabiert) Sie navbar-toggleable-xl aufnehmen müssen, da die navbar standardmäßig nicht anspricht (vertikal gestapelt) ..

<nav class="navbar navbar-light navbar-toggleable-xl bg-faded"> 
    <a href="/" class="navbar-brand">Brand</a> 
    <ul class="navbar-nav"> 
     <li class="nav-item active"> 
      <a class="nav-link" href="#">Link <span class="sr-only">Home</span></a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Link</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Link</a> 
     </li> 
    </ul> 
</nav>

Demo: http://www.codeply.com/go/TVDW57B4SL

Read more in the docs

Quelle

2017-02-13 18:10:47 ZimSystem

Wish I mehr als eine Antwort akzeptiert haben könnte, da sie beide nützlich waren. Danke für den Link zu den Alpha-Dokumenten (ich habe mir eine frühere Version der Dokumentation angesehen). Demo auch sehr hilfreich! – RubyNoob

Ihres Code ist korrekt, aber die Version von Bootstrap, die Sie benötigen, ist Version 3.3.7. Es sieht so aus, als ob Sie versuchen, eine neuere Version von Bootstrap in Ihrem Codepen aufzurufen.

Hier ist dein gleichen Code mit dem älteren Bootstrap:

https://codepen.io/anon/pen/rjPazv

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Quelle

2017-02-13 18:17:08 Staveven

Danke dafür. Sehr hilfreich! – RubyNoob

Bootstrap Navigationsleiste Liste ist eher gestapelt als neben

Antwort

Verwandte Themen