Bootstrap 4 导航栏对齐右侧。

Question

我正在使用Bootstrap 4网站的导航栏模板，但是我在导航栏折叠项的位置上遇到了问题。原本，切换按钮和列表项都位于导航栏的左侧。

但是我想要它们位于页面的右侧，所以我在按钮和导航项上插入了float-xs-right类。然后，如果我点击切换按钮，折叠项的位置就不正确。如您在截图中所见。

导航栏截图

我希望折叠项位于下方并在左侧。

顺便说一下，这是我的代码:

<nav class="navbar navbar-light bg-faded">
 <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
 <a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a>

 <div class="collapse navbar-toggleable-md" id="main-navbar">
  <ul class="nav navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Bio</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Gallery</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Details</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Awards</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">More info</a>
    </li>
  </ul>
 </div>
</nav>

此外，这是我关于这个导航栏的CodePen链接：

http://codepen.io/marcvs/pen/PGvqBO

提前致谢。

- marcvs

---

将浮点数添加到您的ul。 - Shiv

谢谢您的帮助。我尝试添加浮点数，但输出仍然相同。 - marcvs

自从BS 4 alpha 6版本以后，导航栏现在采用了Flexbox布局，并且解决方案也发生了变化：https://dev59.com/_FgR5IYBdhLWcg3wRbk1#41513784 - Carol Skelly

Answer 1

对于Bootstrap 4 Alpha 6 / Beta版本：如何将Bootstrap 4导航栏项目右对齐

这是正确的方法。您需要默认左浮动菜单。在除了无法看到的情况下（hidden-lg-up），将按钮右浮动（float-xs-right），然后将

右浮动（float-lg-right）以使其按照您想要的方式工作。

请参见此CodePen：

http://codepen.io/anon/pen/mAYAKd?editors=1100

它工作得很好。

请注意添加的CSS：

@media screen and (max-width: 992px){
  #main-navbar {
      clear: both;
  }
}

HTML：

  <nav class="navbar navbar-light bg-faded">
    <button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
    <a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a>

    <div class="collapse navbar-toggleable-md" id="main-navbar">
      <ul class="nav navbar-nav float-lg-right">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Bio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Gallery</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Details</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Awards</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">More info</a>
        </li>
      </ul>
    </div>
  </nav>

- Shiv

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Carol Skelly

Answer 2

你好，请看下面的示例。虽然我用了另一种方法，但是我希望这正是你要找的。

 <nav class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data- 
   target="#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>
   &nbsp;   
    </div>
   <a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a>
   <div class="collapse navbar-collapse" id="navbar-collapse-1">     
   <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Home</a></li>
    <li><a href="#">Bio</a></li>
    <li><a href="#">Details</a></li>
     <li><a href="#">Award</a></li>
    <li><a href="#">More info</a></li>

    </ul>
   </div>
   </nav>

请查看这个 Fiddle NavBar Fiddle Demo。

希望能对您有所帮助。

- Asifuzzaman Redoy

---

感谢您的帮助。我目前正在使用Bootstrap 4来创建导航栏。我认为在alpha版本中，navbar-right已经过时了。 - marcvs