Question

在模式中包含下拉列表时，列表没有很好地发布

    <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/

Answer 1

如果自定义CSS中没有任何冲突样式，则以下内容应达到您想要的结果：

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

left: auto;只是阻止下拉列表扩展到全宽，如果这是所需的行为，则将其删除。

jsFiddle

Answer 2

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

模态中的下拉列表

2 个答案: