Bootstrap 4 navbar links stacked

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.

Please give me some guidance.thanks!

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

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