将导航栏引导程序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对齐

回答

相关问题