如何在同一行放置第二個菜單選項？

爲什麼有一個鏈接，「品牌」，也是在bootstrap's example一個鏈接，「家」？我想這兩個會是一樣的。
我喜歡漢堡包圖標，但我希望至少有1個額外的菜單選項，然後再將所有內容放入漢堡包下拉菜單中。在以下示例中，「菜單選項1」如何與「品牌」位於同一行？

<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>

來源

2017-07-27 Phillip Senn

爲什麼有一個鏈接，品牌和家庭？誰知道，這只是一個模板，你可以用它做你想做的！
把你的鏈接在ul帶班的nav，像這樣：

<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>

來源

2017-07-27 16:47:43 DavidG

如何在同一行放置第二個菜單選項？

回答

相關問題