Bootstrap navbar-toggler

问题

So, I'm messing with bootstrap for the first time, figuring out how things work. I've made good progress with navbars, but I'm absolutely stumped about the navbar-toggler.

<nav class="nav navbar-expand-sm navbar-dark">
    <a class="navbar-brand" href="" id="homeOverride"> <span class="overrideFonts"> Home </span> </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">

        <li class="nav-item">
          <a class="nav-link" href=""> <span class="overrideFonts"> Projects </span> </a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href=""> <span class="overrideFonts"> Contact </span> </a>
        </li>

      </ul>
    </div>
  </nav>

It seems like no matter what I do, whenever the page hits that sm breakpoint, the navbar-toggler sticks to the navbar-brand link element -- It's like it's aligned left, or something. I have tried literally everything I could think of. Basically, what I'm wanting to happen is once my page hits that breakpoint and the various list items are hidden, I want that navbar-toggler to be aligned to the right side of the page. Right now, it looks like it's aligned left, and basically nothing I'm doing is overriding that behavior.

I've tried adding navbar-toggler-right, I tried giving a custom ID to override the behavior with maybe float: right !important; --

Navbar Behavior

All I'm trying to do is get that button to the right side of that page when the breakpoint is hit

回答1:

Just change this line

<nav class="nav navbar-expand-sm navbar-dark">

<nav class="navbar navbar-expand-sm navbar-dark">

回答2:

Add these classes

To navbar

justify-content-between justify-content-sm-start

To #navbarSupportedContent

flex-grow-0 flex-sm-grow-1

Code

<nav class="nav navbar-expand-sm navbar-dark justify-content-between justify-content-sm-start">
    <a class="navbar-brand" href="" id="homeOverride"> <span class="overrideFonts"> Home </span> </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse flex-grow-0 flex-sm-grow-1" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">

        <li class="nav-item">
          <a class="nav-link" href=""> <span class="overrideFonts"> Projects </span> </a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href=""> <span class="overrideFonts"> Contact </span> </a>
        </li>

      </ul>
    </div>
  </nav>

More info here https://getbootstrap.com/docs/4.3/utilities/flex/#justify-content , https://getbootstrap.com/docs/4.3/utilities/flex/#grow-and-shrink

来源：https://stackoverflow.com/questions/58905137/bootstrap-navbar-toggler

标签

html

css

bootstrap-4