Bootstrap 4 lijnt navbar items uit naar rechts

Hoe lijn ik een item in de navigatiebalk naar rechts uit?

Ik wil de login en register aan de rechterkant hebben. Maar alles wat ik probeer lijkt niet te werken.

Dit is wat ik tot nu toe heb geprobeerd:

  • <div> om de <ul> met het atribuut: style="float: right"
  • <div> rond de <ul> met het atribuut: style="text-align: right"
  • deze twee dingen geprobeerd op de <li> tags
  • al deze dingen opnieuw geprobeerd met !important toegevoegd aan het eind
  • nav-item veranderd in nav-right in de <li>
  • een pull-sm-right class toegevoegd aan de <li>
  • een align-content-end klasse toegevoegd aan de <li>

Dit is mijn code:

<div id="app" class="container">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav " >
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
  @yield('content')
</div>
Zim
Bewerkte vraag 20ste3 december 2018 в 9:53
Programmering
css twitter-bootstrap flexbox bootstrap-4 navbar
6de4 januari 2017 в 8:02
17 views
Oplossing

Bootstrap 4 heeft veel verschillende manieren om navbar items uit te lijnen. float-right zal niet werken omdat de navbar nu flexbox is.

U kunt de nieuwe mr-auto gebruiken voor automatische rechtermarge op de 1e (linker) navbar-nav. Aternatief, ml-auto kan worden gebruikt op de 2e (rechter) navbar-nav, of als u slechts een enkele navbar-nav heeft.

<div id="app" class="container">


      <span class="navbar-toggler-icon"></span>

    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>

</div>

http://www.codeply.com/go/P0G393rzfm

Er zijn ook flexbox utils. In dit geval heb je 2 navbar-navs, dus justify-content-between in navbar-collapse zou werken om de ruimte ertussen gelijk te maken,

 <div class="navbar-collapse collapse justify-content-between">
     <ul class="navbar-nav mr-auto">
               ..
     </ul>
     <ul class="navbar-nav">
           ..
     </ul>
 </div>
**Update voor Bootstrap 4.0 en nieuwer**

Vanaf Bootstrap 4 beta, zal ml-auto nog steeds werken om items naar rechts te duwen. Let alleen op dat de navbar-toggleable- classes zijn veranderd in navbar-expand-*

Bijgewerkt navbar rechts voor Bootstrap 4

Een andere veel voorkomende Bootstrap 4 Navbar rechts uitlijning scenario omvat een knop aan de rechterkant die blijft buiten de mobiele collapse nav zodat het altijd wordt weergegeven op alle breedtes.

Rechts uitlijnen knop die altijd zichtbaar is

Gerelateerd: https://stackoverflow.com/questions/19733447/bootstrap-navbar-with-left-center-or-right-aligned-items/20362024#20362024

Zim
Bewerkt antwoord 15de2 augustus 2018 в 1:04
Commentaren (7)

In mijn geval wilde ik slechts één set navigatieknoppen/opties en ontdekte dat dit zal werken:

<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Sign Out</a>
    </li>
  </ul>
</div>

Dus, je voegt justify-content-end toe aan de div en laat mr-auto weg in de lijst.

Hier is een werkend voorbeeld.

Commentaren (6)

Ik ben nieuw bij stack overflow en nieuw bij front-end ontwikkeling. Dit is wat voor mij werkte. Dus ik wilde niet dat lijst-items werden weergegeven.

.hidden {
  display:none;
  } 

 #loginButton{

 margin-right:2px;

 }


    <span class="navbar-toggler-icon"></span>

  <a class="navbar-brand" href="#">NavBar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active hidden">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item hidden">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item hidden">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>

      <a href="#">Log In</a>
      <a href="#">Register</a>

  </div>
Commentaren (0)