html - BootStrap 3 同一行上的两个导航标题

Question

我有一个基本的 BootStrap 3 导航标题。我想分开现有的标题，以便我在最右边有一个下拉项，而其他主菜单项的其余部分则在最左边。不确定该怎么做？

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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="index.html">Cost Tracking</a>
        </div>
        <!-- /.navbar-header -->
        <ul class="nav navbar-top-links navbar-left" style="margin-left:96px">
        <button type="button" class="btn btn-primary btn-sm">Project Details</button>
        <button type="button" class="btn btn-primary btn-sm">Cost Centre</button>
        <button type="button" class="btn btn-primary btn-sm">Address Book</button>
        <button type="button" class="btn btn-primary btn-sm">Time Tracking</button>
        <button type="button" class="btn btn-primary btn-sm">Reports</button>               
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-user fa-fw"></i>  <i class="fa fa-caret-down"></i>
                </a>                    
                <ul class="dropdown-menu dropdown-user">                      
                    <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
                    </li>
                </ul>
                <!-- /.dropdown-user -->
            </li>
            <!-- /.dropdown -->
        </ul>
        <!-- /.navbar-top-links -->

        <div class="navbar-default navbar-static-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav" id="side-menu">                     
                    <li class="sidebar-search">
                        <div class="input-group custom-search-form">
                            <input type="text" class="form-control" placeholder="Search...">
                            <span class="input-group-btn">
                            <button class="btn btn-default" type="button">
                                <i class="fa fa-search"></i>
                            </button>
                        </span>
                        </div>
                        <!-- /input-group -->
                    </li>
                    <li class="background-color:#333">
                        <a href="#"><i class="fa fa-edit fa-fw"></i> Project Info</a>                            
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-user fa-fw"></i> Project Roles</a>                            
                    </li>
                    <li>
                        <a href="index.html"><i class="fa fa-dashboard fa-fw"></i> Rate Schedule Review</a>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-bar-chart-o fa-fw"></i> Surcharges</a>
                    </li>
                    <li>
                        <a href="tables.html"><i class="fa fa-group fa-fw"></i> Project Crews</a>
                    </li>
                    <li>
                        <a href="forms.html"><i class="fa fa-user fa-fw"></i> Project Employees</a>
                    </li>                        
                </ul>
                <!-- /#side-menu -->
            </div>
            <!-- /.sidebar-collapse -->
        </div>
        <!-- /.navbar-static-side -->
    </nav>

Answer 1

根据文档，要导航到导航栏的右侧，您需要将其放置在自己的 <ul> 中。 :

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        <i class="fa fa-user fa-fw"></i>  <i class="fa fa-caret-down"></i>
      </a>                    
      <ul class="dropdown-menu dropdown-user">                      
        <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
        </li>
        <li class="divider"></li>
        <li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
        </li>
      </ul>
      <!-- /.dropdown-user -->
    </li>
    <!-- /.dropdown -->
</ul>

作为旁注，<ul> 的唯一直接子代可以是 <li> , 所以你的 <button> s 需要被包裹在列表元素中:

<li><button type="button" class="btn btn-primary btn-sm">Project Details</button></li>

Demo

---

如果您不想将其放在单独的列表中，则必须覆盖 <ul> 上的 float 然后 float 最后一个 <li>正确的。您还需要 .dropdown-menu-right下拉列表中的类 <ul> .

...
<li><button type="button" class="btn btn-primary btn-sm">Reports</button></li>
<li class="dropdown pull-right">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">
    <i class="fa fa-user fa-fw"></i>  <i class="fa fa-caret-down"></i>
  </a>
  <ul class="dropdown-menu dropdown-menu-right dropdown-user">                      
    <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
    </li>
    <li class="divider"></li>
    <li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
    </li>
  </ul>
  <!-- /.dropdown-user -->
</li>

CSS

.navbar-nav {
  float: none;
}

Demo