All geek questions in one place

Bootstrap navigation bar list is stacked, not side by side

I am trying to run a basic Bootstrap navigation bar example:

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

See what happens in CodePen (which has Bootstrap installed). Why are the items in the navigation bar stacked on top of each other and not sitting next to each other?

+5
source share
2 answers

You are using Bootstrap 4 (in codeden), and the navigation bar has changed. If you want a simple horizontal (not collapsible), you need to enable navbar-toggleable-xl , since navbar does not respond by default (stacks vertically).

Update for 4.0.0 navbar-toggleable-* changed to navbar-expand-*

For the original question:

 <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

More details in the docs

+2
source

Your code is correct, but the version of Bootstrap you need is version 3.3.7. It looks like you are trying to invoke a newer version of Bootstrap in your codeden.

Here is your code using the old 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>
+2
source

Source: https://habr.com/ru/post/1264177/

More articles:


All Articles