Bootstrap 4 navbar links stacked

1

Hi I also meet the same issue.
this is my pen link:

I hope these 3 items located in the Navbar are displayed one next to each other.

image
image1322×105 2.22 KB

Please give me some guidance.thanks!

2

I’m not very familiar with Bootstrap 4, but I’ll try to follow from the docs:

  • The <nav> needs a navbar-expand-sm class. The sm could also be md, lg, or xl; just pick what you feel is best.
  • The <li>s need the nav-item class.
  • The <a>'s need the nav-link class.

But the links will still stack for mobile devices. You’ll need to make the links collapsible. Here’s what I tried:

  • You need to add a pretty code-heavy button:
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navLinks" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  • Then nest the <ul> in a <div class="collapse navbar-collapse" id="navLinks">. The id could be anything, but it should match the data-target in the button.
  • navbar-right has to be replaced with ml-auto.
  • The <nav> needs navbar-light or navbar-dark, and a bg-* class (bg-primary, bg-default, etc.) in order for the button to be visible.

I might have missed something.

I recommend that you read the Bootstrap 4 documentation to see what else you can do.

3

I have read the documents of bootstrap 4 and the codes work. Thanks a lot.