Bootstrap Navbar-right 错误答案

【问题标题】：Bootstrap Navbar-right errorBootstrap Navbar-right 错误
【发布时间】：2017-09-04 00:10:17
【问题描述】：

引导类不允许我将 div 中的项目拉到导航栏右侧。我正在在线关注 Django 教程并使用引导程序创建 HTML 页面。这是我的代码：

<!-- Individual items in the navbar -->
    <div class="collapse navbar-collapse" id="topNavBar"> <!-- This makes the collapse three bar button work -->
        <ul class="nav navbar-nav">
            <li class="active">
                <a href="{% url 'pics:index' %}">
                    <span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>&nbsp;
                    Folders
                </a>
            </li>
            <li class="">
                <a href="#">
                    <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>&nbsp;
                    Pictures
                </a>
            </li
        </ul>

        <form class="navbar-form navbar-left" role="search" method="get" action="#">
            <div class="form-group">
                <input type="text" class="form-control" name="q" value="">
            </div>
            <button type="submit" class="btn btn-default">Search</button>
        </form>

        <ul class="nav navbar-nav navbar-right">
            <li class="">
                <a href="#">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp; Add Folder
                </a>
            </li>

            <li class="">
                <a href="#">
                    <span class="glyphicon glyphicon-off" aria-hidden="true"></span>&nbsp; Logout
                </a>
            </li>
        </ul>

    </div>

这应该可以，“添加文件夹”和“注销”按钮应该在右侧，但它不起作用，这些按钮就在搜索栏旁边。任何帮助将不胜感激！

【问题讨论】：

标签： html css django twitter-bootstrap

【解决方案1】：

您的代码正常，但在 <li> 之一中缺少结束标记

<ul class="nav navbar-nav">
          <li class="active">
              <a href="{% url 'pics:index' %}">
                  <span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>&nbsp;
                  Folders
              </a>
          </li>
          <li class="">
              <a href="#">
                  <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>&nbsp;
                  Pictures
              </a>
          </li <!--Here--!>
      </ul>

【讨论】：

哦，哇...我猜大多数编码问题确实出在语法上！非常感谢:)