模式

2013-01-21 21 views
0

包括一个模式内的下拉列表中,当内下拉列表,列表中没有得到很好的postitionned模式

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

+0

我没有看到任何模式代码在这里。您添加到下拉菜单中的样式('position:relative; text-align:right; float:right')负责当前的定位。 [jsFiddle](http://jsfiddle.net/jQUzy/) – Sara

+0

我会发布整个代码 – fatiDev

+0

我们需要查看应用的样式。 – isherwood

回答

1

另一种方法是在引导的.pull右带来的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> 
1

如果你没有任何冲突的样式自定义CSS,下面应该达到的结果你想:

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

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

jsFiddle