Wie lege ich eine zweite Menüoption auf dieselbe Zeile?

Question

OK, habe ich zwei Fragen:

1. Warum gibt es einen Link für "Marke" und auch einen Link für "zu Hause" in bootstrap's example? Ich würde denken, die beiden wären gleich.
2. Ich mag das Hamburger-Symbol, aber ich hätte gerne mindestens 1 zusätzliche Menüoption, bevor ich alles in das Hamburger Dropdown-Menü lege. Wie kann "Menüoption 1" im folgenden Beispiel in der gleichen Zeile wie "Marke" sein?

<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="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> 
 
    <span class="navbar-toggler-icon"></span> 
 
    </button> 
 
    <a class="navbar-brand" href="#">Brand</a> 
 
    <a class="nav-item nav-link" href="#">Menu Option 1</a> 
 
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> 
 
    <div class="navbar-nav"> 
 
     <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> 
 
     <a class="nav-item nav-link" href="#">Features</a> 
 
     <a class="nav-item nav-link" href="#">Pricing</a> 
 
     <a class="nav-item nav-link disabled" href="#">Disabled</a> 
 
    </div> 
 
    </div> 
 
</nav> 
 

 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></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>

Answer 1

1. Warum gibt es einen Link für die Marke und zu Hause? Wer weiß, es ist nur eine Vorlage, Sie können damit machen, was Sie wollen!

2. Setzen Sie Ihre Links in einem ul mit einer Klasse von nav, wie folgt aus:

<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="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> 
 
    <span class="navbar-toggler-icon"></span> 
 
    </button> 
 
    <ul class="nav"> 
 
    <li><a class="navbar-brand" href="#">Brand</a></li> 
 
    <li><a class="nav-item nav-link" href="#">Menu Option 1</a></li> 
 
    </ul> 
 
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> 
 
    <div class="navbar-nav"> 
 
     <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> 
 
     <a class="nav-item nav-link" href="#">Features</a> 
 
     <a class="nav-item nav-link" href="#">Pricing</a> 
 
     <a class="nav-item nav-link disabled" href="#">Disabled</a> 
 
    </div> 
 
    </div> 
 
</nav> 
 

 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></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>