0

モーダル内にドロップダウン リストを含める場合、リストの位置が適切に設定されていません

    <head>
       <link rel="stylesheet" type="text/css" href="/GRH/assets/bootstrap/css/bootstrap.css">
       <script src="/GRH/assets/jquery/jquery.js"></script>
       <script src="/GRH/assets/bootstrap/js/bootstrap.js"></script>    
       </head>
       <body>

      <input type="button" id="test">
   <div id="myModal" class="modal hide fade" tabindex="-1"
                            role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"
                                    aria-hidden="true">
                                    ×
                                </button>
                                <h3 id="title">

                                </h3>
                            </div>
                            <div id="modal-body" class="modal-body">
                            </div>

                            <div class="modal-footer">
                            <div class="dropdown" id="menu6">
                        <button class="btn dropdown-toggle" type="button" data-toggle="dropdown" href="#menu6">
                        Lettre de mise en demeure  <b class="caret"></b>
                        </button>
                        <ul class="dropdown-menu">
                          <li><a href="#" class="generateLettre">générer</a></li>
                          <li><a href="#">ajouter/modifier</a></li>
                        </ul>                
                       </div>

                            <input type="button" class="btn" class="close" data-dismiss="modal" value="fermer">
                            </div>
                            </div>


  </body>
  <script>
  $("#test").click(function(){
  $("#myModal").modal();
  });
  </script>

ドロップダウンリストがモーダルの外側で正常に機能することを持っている jsfiddlz http://jsfiddle.net/jQUzy/2/

4

2 に答える 2

2

カスタム CSS に競合するスタイルがない場合は、次のようにして目的の結果が得られるはずです。

.dropdown-menu {
  right: 0;
  left: auto;
}

left: auto;ドロップダウンが全幅に拡大するのを防ぐだけです。それが望ましい動作である場合は削除してください。

jsフィドル

于 2013-01-21T18:13:44.213 に答える
1

別のアプローチは、ブートストラップの .pull-right で入力をラップして、UL を乗り物に乗せることです。

http://jsfiddle.net/EYC86/2

    <div class="modal-footer">
        <div class="pull-right">
            <div id="menu6" class="dropdown">
                <button href="#menu6" data-toggle="dropdown" type="button" class="btn dropdown-toggle">Lettre de mise en demeure <b class="caret"></b> 
                </button>
                <ul class="dropdown-menu">
                    <li><a class="generateLettre" href="#">générer</a>

                    </li>
                    <li><a href="#">ajouter/modifier</a>

                    </li>
                </ul>
            </div>
            <input type="button" value="fermer" data-dismiss="modal" class="btn">
        </div>
    </div>
于 2013-01-21T18:41:57.850 に答える