8

ドロップダウンメニュー付きのブートストラップナビゲーションバーを設計しました

http://jsfiddle.net/yabasha/fex8N/3/

<nav class="navbar navbar-inverse">
<div class="navbar-inner">
    <ul class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Link</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="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
        </li>
    </ul>
</div>


ul.nav li.dropdown:hover > ul.dropdown-menu{
display: block;    
}

ドロップダウン メニューのデフォルトの配置を (左から中央/右に) 変更して、矢印が中央/右に表示されるようにする方法はありますか?

4

4 に答える 4

16

pxドロップダウンの幅が変更される可能性があるため、配置に を使用しないことをお勧めします。これは、キャレットを中央に配置するのに適しています。

.navbar .nav > li > .dropdown-menu.pull-center:after {
  left: 50%;
  margin-left: -6px;
}
.navbar .nav > li > .dropdown-menu.pull-center:before {
  left: 50%;
  margin-left: -7px;
}

右揃えの場合は、ドロップダウンにクラスを追加するだけですpull-right:

<li class="dropdown">
  <a class="dropdown-toggle" href="#">Link</a>
  <ul class="dropdown-menu pull-right">
    <!-- your menu -->
  </ul>
</li>
于 2013-04-17T19:12:02.463 に答える
0

私はこれを私のプロジェクトに実装し、以下のリンクで回答しました。

https://stackoverflow.com/a/21849528/2026261 .

于 2014-02-18T09:38:54.013 に答える
0 
<div class="dropdown" data-toggle="dropdown" style="width: 150px; text-align: right;">
     <ul class="dropdown-menu" role="menu">
        <li><a href="#">Write Post</a></li>
        <li><a href="#">Posts List</a></li>
        <li class="divider"></li>
        <li><a href="#">Logout</a></li>
     </ul>
     <label class="dropdown-toggle" data-toggle="dropdown">Welcome Hero</label>
     <span class="caret" data-toggle="dropdown"></span>
  </div>

このようにして、選択に応じてメニューを左または右に配置できます。ここに画像の説明を入力

于 2014-09-02T17:38:13.510 に答える
0

あなたの例でJSfiddle http://jsfiddle.net/shail/fex8N/5/

次のコードを好みに合わせて変更し、ドロップダウン キャレットを中央に配置します。

.navbar .nav > li > .dropdown-menu:after {

left: 83px;  /change to your liking/

 }
 .navbar .nav > li > .dropdown-menu:before {

left: 83px;  /keep values in after and before same /

   }

li 要素を右側に揃えるには:

.dropdown-menu > li > a {
             text-align:right;
   }

li 要素を中央に揃えるには:

.dropdown-menu > li > a {
             text-align:center;
   }
于 2013-02-27T15:06:36.483 に答える