Bootstrap Navbar Positionierung Artikel

Question

Ich versuche, Bootstrap Navbar zu verwenden und kopierte das Snippet unten von der Website.

Ich versuche, den Link mit der Klasse navbar-Marke standardmäßig auf der rechten Seite und nicht auf der linken Seite zu positionieren, aber es scheint behoben zu sein?

Ich habe versucht, Dienstprogramm Klassen zu verwenden, um es zu floaten und sie scheinen es nicht zu beeinflussen.

Code Snippet:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
 
     <span class="navbar-toggler-icon"></span> 
 
    </button> 
 
    <div class="collapse navbar-collapse" id="navbarNav"> 
 
     <ul class="navbar-nav"> 
 
     <li class="nav-item active"> 
 
      <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#about">About</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#speakers">Speakers</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#schedule">Schedule</a> 
 
     </li> 
 
     </ul> 
 
     <a class="navbar-brand pull-sm-right??" href="#">Presented by Treehouse</a> 
 
    </div> 
 
</nav>

Answer 1

Verwenden pull-right auf die Marke.

Code:

<nav class="navbar navbar-default" role="navigation"> 
    <a class="navbar-brand pull-right" href="#">Brand</a> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
    </div> 
    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 

     </ul> 
    </div> 
    <!-- /.navbar-collapse --> 
</nav> 

Answer 2

Fügen Sie einfach mr-auto Klasse Ihren navbar-brand. Dadurch wird es rechts von anderen Links ausgerichtet.

Arbeitsbeispiel

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
 
     <span class="navbar-toggler-icon"></span> 
 
    </button> 
 
    <div class="collapse navbar-collapse" id="navbarNav"> 
 
     <ul class="navbar-nav"> 
 
     <li class="nav-item active"> 
 
      <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#about">About</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#speakers">Speakers</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
      <a class="nav-link" href="#schedule">Schedule</a> 
 
     </li> 
 
     </ul> 
 
     <a class="navbar-brand mr-auto" href="#">Presented by Treehouse</a> 
 
    </div> 
 
</nav>

Answer 3

Verwenden ml-auto auf der Marke (navbar-brand):

<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse"> 
     <ul class="navbar-nav"> 
     <li class="nav-item active"> 
      <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#about">About</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#speakers">Speakers</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#schedule">Schedule</a> 
     </li> 
     </ul> 
     <a class="navbar-brand ml-auto" href="#">Presented by Treehouse</a> 
    </div> 
</nav> 

Working Demo

Alternativ können Sie mr-auto auf der navbar-nav verwenden, um die Marke richtig zu machen.