web-dev-qa-db-ja.com

Bootstrap 3ドロップダウンメニューの中央揃えが機能しない

ドロップダウンがホバーで開かれている親の中心にドロップダウンを揃えることができません。 .nav .navbar li要素全体の中央にテキストを配置しようとしましたが、機能しません。私はマージンを設定しようとしましたが、ドロップダウンであるul.dropdown-menu全体で50％で動作しません。 HTMLコードは次のとおりです。

<ul class="nav navbar-nav navbar-right" id="headerDropdowns">
  <li><div class="btn-toolbar">
    <div class="btn-group">
      <button class="btnCustom" data-toggle="dropdown" data-hover="dropdown" data-delay="1000">Our Difference</button>
      <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">Made in the USA</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Human Grade</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Ingredients Fresh</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">USDA Meats</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Our Story</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Campare</a></li>
      </ul>
    </div>
  </li>
</ul>

どのクラスのドロップダウンメニュー、またはnav navbar-navで、アライメントを行う必要があり、何を設定する必要がありますか？

htmlcsstwitter-bootstrapdrop-down-menubootstrap-4
24
Matija

トランスフォームを使用すると、固定幅を使用する必要がなくなります。

.dropdown-menu {
  left: 50%;
  right: auto;
  text-align: center;
  transform: translate(-50%, 0);
}

http://css-tricks.com/centering-percentage-widthheight-elements/ の影響を受ける回答

77
PaulPrecept

ドロップダウンulに固定幅を与えたい限り、これを行うことができます。以下のコードを参照してください：

.dropdown{text-align:center;}
.button, .dropdown-menu{margin:10px auto}
.dropdown-menu{width:200px; left:50%; margin-left:-100px;}

最初の2つの宣言は視覚化を目的としていますが、重要な部分は3行目です。幅（この場合は200px）を定義してから、margin-left幅の半分に等しい。これは、ボタンが要素の右、左、または要素間にあるかどうかに関係なく、任意の幅で機能します（もちろん、おそらくbutton要素用のスペースが必要です）

フィドルを参照

5
Devin

唯一のい方法は、次のようなニーズに応じて位置を設定することです。

.dropdown-menu{
    right: -25px !important;
}

フィドル

しかし、それは使用方法ではありません。すべてのメディアデバイスの設定を調整する必要があることに注意してください。

1
Steven Web