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;只是防止下拉菜单扩展到全宽，如果这是所需的行为，请将其删除。

jsFiddle

于 2013-01-21T18:13:44.213 回答
1

另一种方法是将输入包装在 Bootstrap 的 .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 回答