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>需要包含在列表元素中：

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

<强> Demo

如果您不想在单独的列表中使用它，那么您必须覆盖<ul>上的浮动，然后将最终<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

BootStrap 3同一行上的两个Nav标头

1 个答案: