3

Twitter Bootstrap を使用してテーマに取り組んでおり、ドロップダウン ナビゲーションを左揃えではなく中央に配置しようとしています。明確にするために、ボックス内のテキストを中央に配置することではなく、親に対してドロップダウンボックス全体を中央に配置することについて話しています。

マークアップは次のようになります。

<ul id="nav" class="nav ww-nav pull-right hidden-phone">
  <li class="active"><a href="#">Words</a></li>
  <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Articles</a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li><a href="#">Published</a></li>
        <li><a href="#">Categorized</a></li>
        <li><a href="#">Uncategorized</a></li>
        <li><a href="#">Award Winning</a></li>
    </ul>                   
  </li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

意味を明確にするために、スクリーンショットを添付します。

ブートストラップ ドロップダウン メニュー

注：さまざまな親アイテムで機能する一般的なソリューションを探しています。これはテーマであるため、ナビゲーション アイテムは 3 文字から 20 文字の幅にすることができます。残念ながら、X ピクセルの単純な余白ではうまくいきません。

PS: コメントで要求されたように、すべてを JSFiddle に置きました: http://jsfiddle.net/zdCYX/4/

ありがとう

4

2 に答える 2

10

jQueryを使用してこれを解決し、すべてのサブメニューの左マージンを計算して調整しました。

このようにして、ナビゲーション項目は互いに同じスペースを持ちます。

document.onreadystatechange = function() {
    if (document.readyState === 'complete') {
        $("ul.ww-nav ul.dropdown-menu").each(function(){
            var parentWidth = $(this).parent().innerWidth();
            var menuWidth = $(this).innerWidth();
            var margin = (parentWidth / 2 ) - (menuWidth / 2);
            margin = margin + "px";
            $(this).css("margin-left", margin);
        });
    }
}
于 2013-03-04T15:52:03.127 に答える
1

ブラウザでのJsfiddleデモ
できることは、幅をメインの nav 要素に設定し、ドロップダウンよりも次のように設定することです。

 .navbar .nav > li {

   width: 116px;
     }

.dropdown-menu {
      display:none;
      width:116px;
      min-width:116px;
      margin:0 auto;
  }

次のコード align 要素を変更する必要があります。

.dropdown-menu > li > a {
         text-align:center;
}
于 2013-02-28T16:12:11.130 に答える