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!
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:
<nav>
needs a navbar-expand-sm
class. The sm
could also be md
, lg
, or xl
; just pick what you feel is best.<li>
s need the nav-item
class.<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:
<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>
<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
.<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.