Bootstrap - 向右浮动导航栏按钮

Question

我正在使用 bootstrap 导航栏，但我想将其中一个按钮浮动到右侧，而不是像现在那样浮动到左侧。这是 HTML：

     <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact" class="navbar-nav pull-right">Contact</a></li>
      </ul>
    </div>
  </div>
</div>

我试过使用 nav navbar-nav navbar-right 、 float:right 和 pull-right 。我真的不知道我还能做什么。任何帮助表示赞赏。

JSFiddle

原文由 Michael Blake 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

为该列表项创建一个单独的 ul.nav 并将 ul 浮动。

jsFiddle

原文由 helion3 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在 bootstrap 4 中使用：

 <ul class="nav navbar-nav ml-auto">

这会将导航栏推到右侧。使用 mr-auto 将其推向左侧，这是默认行为。

原文由 Henry 发布，翻译遵循 CC BY-SA 4.0 许可协议