web-dev-qa-db-ja.com

ブートストラップ：ナビゲーションバー項目に対するドロップダウンメニューの位置

次のドロップダウンがあります

<label class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#">
    Action <b class="caret"></b></label>
<ul class="dropdown-menu" role="menu" aria-labelledby="lang-selector" id="lang-selector">
    dropdown content goes here
</ul>

ドロップダウンの左上隅はテキスト（アクション）の左下隅にありますが、ドロップダウンの右上隅の位置がテキストの右下にあることを望みます。どうやってやるの？

よろしくお願いします。

csstwitter-bootstrapdrop-down-menu
92
curious1

これは私たちが達成しようとしている効果です：

A right-aligned menu

適用する必要のあるクラスは、Bootstrap 3.1.0のリリースで変更され、Bootstrap 4.のリリースで再び変更されました。 インポートするBootstrapのバージョン番号を再確認し、別のバージョンを試してください。

ブートストラップ3

V3.1.0より前

pull-rightクラスを使用して、メニューの右側をキャレットに合わせることができます。

<li class="dropdown">
  <a class="dropdown-toggle" href="#">Link</a>
  <ul class="dropdown-menu pull-right">
     <li>...</li>
  </ul>
</li>

フィドル： http://jsfiddle.net/joeczucha/ewzafdju/

V3.1.0以降

V3.1.0では、ドロップダウンメニューの.pull-rightを廃止しました。メニューを右揃えするには、.dropdown-menu-rightを使用します。 navbarの右揃えのnavコンポーネントは、このクラスのmixinバージョンを使用してメニューを自動的に配置します。それをオーバーライドするには、.dropdown-menu-leftを使用します。

dropdown-rightクラスを使用して、メニューの右側をキャレットに合わせることができます。

<li class="dropdown">
  <a class="dropdown-toggle" href="#">Link</a>
  <ul class="dropdown-menu dropdown-menu-right">
     <li>...</li>
  </ul>
</li>

フィドル： http://jsfiddle.net/joeczucha/1nrLafxc/

ブートストラップ4

Bootstrap 4のクラスはBootstrap> 3.1.0と同じですが、周囲のマークアップの残りが少し変更されていることに注意してください。

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#">
    Link
  </a>
  <div class="dropdown-menu dropdown-menu-right">
    <a class="dropdown-item" href="#">...</a>
  </div>
</li>

フィドル： https://jsfiddle.net/joeczucha/f8h2tLoc/

183
Joe Czucha

他の人がこの問題をどのように解決するか、またはBootstrapにこの設定があるかどうかはわかりません。

私は解決策を提供するこのスレッドを見つけました：

https://github.com/twbs/bootstrap/issues/1411

投稿の1つは、

<ul class="dropdown-menu" style="right: 0; left: auto;">

私はテストし、動作します。

Bootstrapが上記のcss経由ではなく、これを行うための設定を提供するかどうかを知りたい。

乾杯。

48
curious1

Bootstrap docに基づく：

V3.1.0の時点で、.pull-rightはドロップダウンメニューで非推奨になりました。 .dropdown-menu-rightを使用します

例えば：

<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
19
ninetiger

メニューを表示したい場合は、クラス「dropup」を追加するだけです
同じdivからクラス「ドロップダウン」が存在する場合は削除します。

<div class="btn-group dropup">

enter image description here

10
Philip Enc

Boostrapには、navbar-rightというクラスがあります。したがって、コードは次のようになります。

<ul class="nav navbar-right">
    <li class="dropdown">
      <a class="dropdown-toggle" href="#" data-toggle="dropdown">Link</a>
      <ul class="dropdown-menu">
         <li>...</li>
      </ul>
    </li>
</ul>
1
Andrei Stalbe

遅れたとしても、私は誰かを助けることができると思います。ドロップダウンメニューまたはサブメニューが画面の右側にある場合は左側で開き、メニューまたはサブメニューが左側にある場合は右側で開きます。

$(".dropdown-toggle").on("click", function(event){//"show.bs.dropdown"
    var liparent=$(this.parentElement);
    var ulChild=liparent.find('ul');
    var xOffset=liparent.offset().left;
    var alignRight=($(document).width()-xOffset)<xOffset;


    if (liparent.hasClass("dropdown-submenu"))
    {
        ulChild.css("left",alignRight?"-101%":"");
    }
    else
    {                
        ulChild.toggleClass("dropdown-menu-right",alignRight);
    }

});

垂直位置を検出するために、追加することもできます

$( document ).ready(function() {
        var liparent=$(".dropdown");
    var yOffset=liparent.offset().top;
        var toTop=($(document).height()-yOffset)<yOffset;
    liparent.toggleClass("dropup",toTop);
});

https://jsfiddle.net/jd1100/rf9zvdhg/28/

1
JD11

ドロップダウンを中央に配置したい場合、これが解決策です。

<ul class="dropdown-menu" style="right:auto; left: auto;">
0
John Dekker