94

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

4

12 に答える 12

26

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

ここにデモがあります

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

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

于 2012-08-30T00:20:17.533 に答える
4

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

<ul class="dropdown-menu pull-right" role="menu">
于 2016-11-18T14:27:47.960 に答える
4

右側に十分なスペースがあるかどうかを確認する JavaScript 関数を作成しました。ある場合は右側に表示し、ない場合は左側に表示します

テスト済み:

  • ファイアフォックス (マック)
  • クローム (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。Safari と chrome の小さなバグです。最初にホバーすると左側に移動し、修正された場合はこの投稿が更新されます。

于 2012-10-12T14:37:58.063 に答える
0

ブートストラップの最新バージョンを使用していますか? 以下に示すように、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>
于 2012-08-29T23:02:25.433 に答える
0

あなたがしなければならない唯一のことは

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

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

于 2020-08-18T06:38:08.173 に答える