bootstrap nav verbindet weg von Ort

Question

Ich habe eine Navbar (mit Bootstrap 4 CSS), ich habe 3 Links und eine Marke.

Ich erwarte, dass alle diese in einer Linie sind, aber aus irgendeinem Grund sind sie überall. Hier

ist, wie es aussieht:

Und hier meine aktuellen Code ist:

<nav class="navbar navbar-fixed-top"> 
 

 
    <!-- Toggle Button --> 
 
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#nav-content"> 
 
    ☰ 
 
    </button> 
 

 
    <!-- Nav Content --> 
 
    <div class="collapse navbar-toggleable-xs" id="nav-content"> 
 
    <a class="navbar-brand" href="#">Logo</a> 
 
    <ul class="nav navbar-nav"> 
 
     <li><a href="#search">Search <i class="fa fa-search" aria-hidden="true"></i></a> 
 
     </li> 
 
    </ul> 
 
    <ul class="nav navbar-nav pull-sm-right pull-md-right pull-lg-right"> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#">Sign Up</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#">Log In</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
</nav> 
 

 
<!-- Main jumbotron for a primary marketing message or call to action --> 
 
<div class="jumbotron"> 
 
    <div class="container"> 
 
    <p class="text-center">Play button will go here when video is implemented</p> 
 
    <div class="col-xs-12 text-center"> 
 
     <a class="btn btn-primary btn-lg" href="#" role="button">Earn now! &raquo;</a> 
 
    </div> 
 
    </div> 
 
</div>

Ich verwende proxima nova als meine Schrift und ja , war das noch nie passiert, irgendwelche Ideen?

Answer 1

Versuchen Sie Folgendes: Ich habe pull-md-left-Klasse zum ersten Navbar-nav hinzugefügt.

<nav class="navbar navbar-fixed-top"> 

    <!-- Toggle Button --> 
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#nav-content"> 
    ☰ 
    </button> 

    <!-- Nav Content --> 
    <div class="collapse navbar-toggleable-xs" id="nav-content"> 
    <a class="navbar-brand" href="#">Logo</a> 
    <ul class="nav navbar-nav pull-md-left"> 
     <li class="nav-item"> 
     <a href="#search" class="nav-link">Search <i class="fa fa-search" aria-hidden="true"></i></a> 
     </li> 
    </ul> 
    <ul class="nav navbar-nav pull-sm-right pull-md-right pull-lg-right"> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Sign Up</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Log In</a> 
     </li> 
    </ul> 
    </div> 

</nav> 

<!-- Main jumbotron for a primary marketing message or call to action --> 
<div class="jumbotron"> 
    <div class="container"> 
    <p class="text-center">Play button will go here when video is implemented</p> 
    <div class="col-xs-12 text-center"> 
     <a class="btn btn-primary btn-lg" href="#" role="button">Earn now! &raquo;</a> 
    </div> 
    </div> 
</div> 

Answer 2

Haben Sie versucht, ein einzelnes 'ul class = "nav navbar-nav"' für Ihre navbar zu verwenden und die Klasse '' pull 'direkt auf Ihre' li 'Tags zu setzen? :)

Answer 3

Stellen Sie sicher, nav-item und nav-link im Such Link verwenden ...

<ul class="nav navbar-nav"> 
     <li class="nav-item"><a href="#search" class="nav-link" >Search <i class="fa fa-search" aria-hidden="true"></i></a> 
     </li> 
    </ul> 

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

Auch zu diesem Zeitpunkt Bootstrap 4 in alpha ist, so dass es ein work in progress ist.