將導航欄引導程序4對齊

我正在嘗試將新版本的Bootstrap用於個人項目。我試圖製作一個導航欄，我希望鏈接對齊到右側，我尋找一個解決方案，但我找不到如何做到這一點。這裏是我的代碼將導航欄引導程序4對齊

<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="#">taïho sushi</a> 
 
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> 
 
     <div class="navbar-nav"> 
 
      <a class="nav-item nav-link active" href="#">Présentation</a> 
 
      <a class="nav-item nav-link" href="#">Menu</a> 
 
      <a class="nav-item nav-link" href="#">Contact</a> 
 
     </div> 
 
    </div> 
 
</nav>

來源

2017-02-19 ShiroHaru __

的[在自舉4阿爾法6將導航欄項向右]可能的複製（http://stackoverflow.com/questions/41513463/align-navbar-item-to-the- right-in-bootstrap-4-alpha-6） – ZimSystem

使用navbar-right類

<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="#">taïho sushi</a> 
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> 
     <div class="navbar-nav navbar-right"> 
      <a class="nav-item nav-link active" href="#">Présentation</a> 
      <a class="nav-item nav-link" href="#">Menu</a> 
      <a class="nav-item nav-link" href="#">Contact</a> 
     </div> 
    </div> 
</nav>

來源

2017-02-19 18:00:52

已經嘗試過，它不起作用:( –

似乎應該是另一個問題，因爲它在這裏工作。 –

navbar-right在VS 4 alpha 6中已棄用。 [現在ml-auto]（http://stackoverflow.com/questions/41513463/align-navbar-item-to-the-right-in-bootstrap-4-alpha-6） – ZimSystem

使用新ml-auto類設置margin-left:auto和推動內容的權利。

<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="#">taïho sushi</a> 
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> 
     <div class="navbar-nav ml-auto"> 
      <a class="nav-item nav-link active" href="#">Présentation</a> 
      <a class="nav-item nav-link" href="#">Menu</a> 
      <a class="nav-item nav-link" href="#">Contact</a> 
     </div> 
    </div> 
</nav>

Demo on Codeply

來源

2017-02-20 11:30:24 ZimSystem

不適用於safari 5.1 – xamDev

將導航欄引導程序4對齊

回答

相關問題