0

我在 a 中有一些东西<ul>，但我需要最后一个一直向右。我怎么把它放在那里？（我需要下拉菜单向右移动。）

  <ul class="nav navbar-nav">
    <li><a class="btn" href="#"><i class="glyphicon glyphicon-pencil"></i></a></li>
    <li><a class="btn" href="#"><i class="glyphicon glyphicon-book"></i></a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li class="nav-header">Nav header</li>
        <li><a href="#">Separated link</a></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
4

3 回答 3

2

将其拆分为两个导航栏：一个在左侧，一个在右侧浮动pull-right：

<ul class="nav navbar-nav">
  <li><a class="btn" href="#"><i class="glyphicon glyphicon-pencil"></i></a></li>
  <li><a class="btn" href="#"><i class="glyphicon glyphicon-book"></i></a></li>
</ul>
<ul class="nav navbar-nav pull-right">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      Dropdown <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li class="nav-header">Nav header</li>
      <li><a href="#">Separated link</a></li>
      <li><a href="#">One more separated link</a></li>
    </ul>
  </li>
</ul>

查看 Bootstrap 示例站点中的示例：http ://examples.getbootstrap.com/navbar-fixed-top/index.html

于 2013-08-06T02:09:12.377 回答
0

HTMl 和 CSS 相对较新，但我解决了类似的问题，而无需制作重复的菜单栏。简单地'浮动：对;' 在里面

  • 你想出现在右边的标签。（最好将它们作为最后一个
  • 保持逻辑顺序的元素。）

    例如

  • 行动
    • 变为 Action 对您想要在右侧的任何元素重复此操作。它将覆盖定义的 float:left 默认值。

  • 落下
  • 行动
  • 另一个动作
  • 这里有别的东西
    • 导航标题
  • 单独的链接
  • 另一个单独的链接
    • 于 2015-03-16T06:20:36.127 回答
    0 
    <div class="container">
  <ul class="nav navbar-nav">
    <li><a class="btn" href="#"><i class="glyphicon glyphicon-pencil"></i></a></li>
    <li><a class="btn" href="#"><i class="glyphicon glyphicon-book"></i></a></li>
      <!--// add a class of .pull-right //-->        
     <li class="dropdown pull-right ">  
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li class="nav-header">Nav header</li>
        <li><a href="#">Separated link</a></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
</div>

    演示

    于 2013-08-06T02:00:44.550 回答