0

にはいくつかのものが<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

それを 2 つのナビゲーション バーに分割します。1 つは左側にあり、もう 1 つは右にフロートし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 は比較的新しいものですが、メニュー バーを複製することなく同様の問題を解決しました。単純に「float: right;」の中に

  • 右に表示させたいタグ。(最後に持っていくのがベスト
  • 論理的な順序を維持するための要素)。

    例えば

  • アクション
    • になります アクション 右側に必要なすべての要素に対してこれを繰り返します。定義された float:left デフォルトを上書きします。

  • 落ちる
  • アクション
  • 別のアクション
  • ここに何か他のものがあります
    • ナビゲーション ヘッダー
  • 別リンク
  • 別のリンクをもう 1 つ
    • 于 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 に答える