模態彈出內容在動態添加時得到溢出

我在div點擊動態附加HTML。我正確地獲取內容。但是當我追加HTML時，UI會陷入混亂。模態彈出內容在動態添加時得到溢出

CodePen：http://codepen.io/anon/pen/QGpRRy

代碼：

<html> 
    <head> 
     <title></title> 
     <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"></link> 
     <style> 
      #pageTitle { 
       display:none; 
      } 
     </style> 
    </head> 
<body> 
    <div class="col-lg-12 text-center"> 
     <h1>Policies</h1> 
    </div> 
    <div class="col-lg-12"> 
     <div class="container" id="tiles"> 
      <div class="col-lg-4" style="min-height:80px; background-color:ActiveCaption" id="tileTraffic"> 
       <div class="row"> 
        <div class="col-lg-8"> 
         <h3>Traffic Rules</h3> 
        </div> 
        <div class="col-lg-4"> 
         <h1>0</h1> 
        </div> 
       </div> 
      </div> 
      <div class="col-lg-4" style="min-height:80px; background-color:antiquewhite" id="tileFood"> 
       <div class="row"> 
        <div class="col-lg-8"> 
         <h3>Food Policies</h3> 
        </div> 
        <div class="col-lg-4"> 
         <h1>0</h1> 
        </div> 
       </div> 
      </div> 
      <div class="col-lg-4" style="min-height:80px; background-color:cadetblue" id="tileMedical"> 
       <div class="row"> 
        <div class="col-lg-8"> 
         <h3>Medical Policies</h3> 
        </div> 
        <div class="col-lg-4"> 
         <h1>0</h1> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- Modal --> 
    <div id="myModalTraffic" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <div class="modal-body"> 

       </div> 
      </div> 
     </div> 
    </div> 
    <div id="myModalFood" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <div class="modal-body"> 

       </div> 
      </div> 
     </div> 
    </div> 
    <div id="myModalMedical" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <div class="modal-body"> 

       </div> 
      </div> 
     </div> 
    </div> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    <script type="text/javascript"> 
     $("#tileTraffic").click(function() { 
      $('#myModalTraffic').modal('show'); 
      var html = "<div class=\"col-lg-12\"><div class=\"col-lg-4\"></div><div class=\"col-lg-8\"><p>Traffic Rules</p></div></div>"; 
      $("#myModalTraffic .modal-body").html(html); 
      $("#myModalTraffic .modal-body").append(html); 

     }); 
     $("#tileFood").click(function() { 
      $('#myModalFood').modal('show'); 
     }); 
     $("#tileMedical").click(function() { 
      $('#myModalMedical').modal('show'); 
     }); 
    </script> 
</body> 

</html>

來源

2016-11-22 Ubiquitous Developers

var html = "<div class=\"row\"> <div class=\"col-lg-12\"><div class=\"col-lg-4\"></div><div class=\"col-lg-8\"><p>Traffic Rules</p></div></div></div>";

裹row .The col裏面的山坳是floating.It使UI對齊問題。 row通過僞元素添加clear: both;

http://codepen.io/anon/pen/xRqoxj入住這

來源

2016-11-22 11:13:31 XYZ

大聲笑。我多麼傻。但我不知道它 –

:-)。如果它幫助你，請標記爲答案 – XYZ

或者清除浮動，可以針對模態中的列，並導致他們不浮動。

.modal-body 
{ 
    text-align: center; 
} 

.modal-body div[class^="col-lg-"] 
{ 
    float: none; 
    width: 100%; 
}

Codepen

來源

2016-11-22 11:21:21 Goombah

模態彈出內容在動態添加時得到溢出

回答

相關問題