在Bootstrap 3中向导航栏添加按钮的正确方法

Question

在Bootstrap 3中向导航栏右侧添加按钮的正确方法是什么？

这是一种方法：

<ul class="nav navbar-nav navbar-right">
  <li>
    <button type="button" class="btn btn-primary navbar-btn">
      <span class="glyphicon glyphicon-plus"></span> 
      Activiteit toevoegen
    </button>
  </li>
</ul>

这是另一种方法：

<div class="nav navbar-nav navbar-right">
  <button type="button" class="btn btn-primary navbar-btn">
    <span class="glyphicon glyphicon-plus"></span> 
    Activiteit toevoegen
  </button>
  </li>
</div>

由于我添加了一个按钮，我猜我不需要使用无序列表？

有更好/更正确的方法吗？

更新

此外，使用以下代码，折叠菜单时，按钮直接放在浏览器窗口的边缘，与其他菜单项不同：

<nav class="navbar navbar-default" 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">Toon/verberg navigatie</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <img src="images/logo.jpg" alt="Brandhof Bijzonder Bouwen">
      </a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Weekplanning</a></li>
        <li><a href="#">Voorgaande weken</a></li>
        <li><a href="#">Uitloggen</a></li>
      </ul>
      <div class="nav navbar-nav navbar-right">
        <button type="button" class="btn btn-primary navbar-btn">
          <span class="glyphicon glyphicon-plus"></span>
          Activiteit toevoegen
        </button>
      </div>
    </div>
  </div>
</nav>

截图：

编辑：嗯，当我遗漏＆＃39; navbar-nav＆＃39;时，它似乎正常工作。这种方法有什么缺点吗？

Answer 1

向导航栏添加按钮的正确方法只是添加课程.navbar-btn

请记住，HTML是您内容的语义表示。如果您只有一个项目，我就不会创建无序的列表项目。然后你可以随意显示它。

在这种情况下，我会遗漏ul。

这是一个完整的导航栏：

<div class="navbar navbar-default">
    <div class="container">
        <a class="navbar-brand" href="#">
            <img src="http://i.imgur.com/GAQSCtB.png" width="25" />
        </a>
        <div class="nav pull-right">
          <button type="button" class="btn btn-primary navbar-btn">
            <span class="glyphicon glyphicon-plus"></span> 
            Activiteit toevoegen
          </button>
        </div>
    </div>
</div>

Here's a Working Demo in Fiddle

更新

如果要在折叠菜单时设置按钮的样式，可以使用媒体查询在小屏幕上更改样式：

@media (max-width: 768px) { 
    .navbar-btn {
        margin-left: 15px;
    }
}

Demo in fiddle