Twitterのブートストラップサブメニューを左側に開く方法は？

ドロップダウンメニューでTwitterブートストラップサブメニューを作成しようとしましたが、問題があります。ページの右上隅にドロップダウンメニューがあり、そのメニューにはもう1つのサブメニューがあります。ただし、サブメニューが開いたとき-ウィンドウに収まらず、右に移動しすぎるため、ユーザーは最初の文字しか表示できません。そのサブメニューを右ではなく左に開く方法は？

最も簡単な方法は、pull-leftクラスをあなたに追加することですdropdown-submenu

<li class="dropdown-submenu pull-left">

jsfiddle：デモ

私がこの権利を理解していれば、ブートストラップはまさにこのケースのためのCSSクラスを提供します。メニュー「ul」に「pull-right」を追加します。

<ul class="dropdown-menu pull-right">

..最終的には、メニューオプションは、ドロップダウンしたボタンに合わせて右揃えで表示されます。

現在のクラス.dropdown-submenu > .dropdown-menuは持っていleft: 100%;ます。そのため、左側のサブメニューを開きたい場合は、これらの設定を左側の負の位置に上書きします。例えばleft: -95%;。左側にサブメニューが表示されるので、他の設定を調整して完璧なプレビューを取得できます。

こちらがデモです

編集：OPの質問と私の答えは2012年8月からです。一方、Bootstrapが変更されたため、.pull-leftクラスがあります。当時、私の答えは正しかった。これでcssを手動で設定する必要がなくなり、.pull-leftクラスができました。

編集2：BootstrapがURLを変更したため、デモは機能していません。jsfiddleで外部リソースを変更して、新しいリソースに置き換えるだけです。

ブートストラップv4を使用している場合は、新しい方法があります。

要素で使用する必要.dropdown-menu-rightがあり.dropdown-menuます。

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

コードへのリンク：https : //getbootstrap.com/docs/4.0/components/dropdowns/#menu-items

タスクを実行する正しい方法は次のとおりです。

/* Submenu placement itself */
.dropdown-submenu > .dropdown-menu { left: auto; right: 100%; }
/* Arrow position */
.dropdown-submenu { position: relative; }
.dropdown-submenu > a:after { position: absolute; left: 7px; top: 3px; float: none; border-right-color: #cccccc; border-width: 5px 5px 5px 0; }
.dropdown-submenu:hover > a:after { border-right-color: #ffffff; }

彼が右側に十分なスペースがあるかどうかを確認するJavaScript関数を作成しました。持っている場合は右側に表示され、それ以外の場合は左側に表示されます

テスト済み：

• Firefox（Mac）
• Chorme（Mac）
• サファリ（mac）

JavaScript：

$(document).ready(function(){
    //little fix for the poisition.
    var newPos     = $(".fixed-menuprofile .dropdown-submenu").offset().left - $(this).width();
    $(".fixed-menuprofile .dropdown-submenu").find('ul').offset({ "left": newPos });

    $(".fixed-menu .dropdown-submenu").mouseover(function() {
        var submenuPos = $(this).offset().left + 325;
        var windowPos  = $(window).width();
        var oldPos     = $(this).offset().left + $(this).width();
        var newPos     = $(this).offset().left - $(this).width();

        if( submenuPos > windowPos ){
            $(this).find('ul').offset({ "left": newPos });
        } else {
            $(this).find('ul').offset({ "left": oldPos });
        }
    });
});

この修正をすべてのメニュー項目に追加したくないので、新しいクラスを作成しました。ulに固定メニューを配置します。

<ul class="dropdown-menu fixed-menu">

これがうまくいくことを願っています。

ps。サファリとクロームの小さなバグ、最初のホバーはそれを左側に配置し、私が修正した場合、この投稿を更新します。

レベルが1つだけで、ブートストラップ3を使用する場合はpull-right、ul要素に追加します

<ul class="dropdown-menu pull-right" role="menu">

実際、dropdownラッパーをフローティングすることに問題がなければ、に追加navbar-rightするのと同じくらい簡単であることがわかりましたdropdown。

ナビゲーションバーにないため、これは不正行為のように見えますが、私には問題なく機能します。

<div class="dropdown navbar-right">
...
</div>

その後、pull-left直接にフローティングをさらにカスタマイズできdropdownます...

<div class="dropdown pull-left navbar-right">
...
</div>

...またはその周りのラッパーとして...

<div class="pull-left">
  <div class="dropdown navbar-right">
  ...
  </div>
</div>

LESS CSSを使用している場合は、ドロップダウンを接続矢印で移動するための小さなミックスインを作成しました。

.dropdown-menu-shift( @num-pixels, @arrow-position: 10px ) {  // mixin to shift the dropdown menu
    left: @num-pixels;
    &:before { left: -@num-pixels + @arrow-position; }        // triangle outline
    &:after  { left: -@num-pixels + @arrow-position + 1px; }  // triangle internal
}

次に、たとえば.dropdown-menuidでaを移動するには、次のdropdown-menu-xようにします。

#dropdown-menu-x {
    .dropdown-menu-shift( -100px );
}

彼が右側に十分なスペースがあるかどうかを確認するJavaScript関数を作成しました。表示されている場合は右側に表示され、表示されていない場合は左側に表示されます。右側に十分なスペースがある場合も、右側に表示されます。それはループです...

$(document).ready(function () {

$('body, html').css('overflow', 'hidden');
var screenWidth = $(window).width();
$('body, html').css('overflow', 'visible');

if (screenWidth > 767) {

    $(".dropdown-submenu").hover(function () {

        var dropdownPosition = $(this).offset().left + $(this).width() + $(this).find('ul').width();
        var newPosition = $(this).offset().left - $(this).find('ul').width();
        var windowPosition = $(window).width();

        var oldPosition = $(this).offset().left + $(this).width();
        //document.title = dropdownPosition;
        if (dropdownPosition > windowPosition) {
            $(this).find('ul').offset({ "left": newPosition });
        } else {
            $(this).find('ul').offset({ "left": oldPosition });
        }
    });

}

}）;

最新バージョンのブートストラップを使用していますか？以下に示すように、Fluid Layoutの例の HTMLを適合させました。ドロップダウンを追加し、pull-rightクラスを追加することにより、それを右側に配置しました。ドロップダウンメニューにカーソルを合わせると、自動的に左に引っ張られ、何も非表示にならず、すべてのメニューテキストが表示されます。カスタムCSSを使用していません。

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Project name</a>
      <div class="nav-collapse collapse">
        <ul class="nav pull-right">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
          <li class="dropdown open">
            <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>
        <p class="navbar-text pull-right">
          Logged in as <a href="#" class="navbar-link">Username</a>
        </p>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

あなたがしなければならないのは

 <ul style='left:-100%'> 

右側に表示したいメニューの