引導放置在容器流體

Question

我想在其上添加dinamically一個按鈕，點擊時顯示模式時，模態不工作：

$(document).ready(function(){ 
    $('#rent-php').on('click', '.bike-rent-btn', function(){ 
     $('#confirm-rent-modal').modal('show'); 
    }); 
}); 

這是通過PHP dinamically添加的按鈕看起來是這樣的：

<button type="button" class="btn btn-primary btn-md bike-rent-btn" data-toggle="modal" data-target="#confirm-rent-modal">Rent</button> 

這是HTML代碼，幾乎從複製粘貼W3：

<div class="modal fade modal-sm" id="confirm-rent-modal" role="dialog"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title"></h4> 
     </div> 
     <div class="modal-body"> 
     <p></p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

</div>   
</div> 

也有也是容器流體一些自定義的風格：

height: 100vh; 
margin: 0; 
padding: 30px; 
background-color: #EEEEEE; 

當這個代碼是發生在container-fluid bootsrap格，沒有任何反應。當我把它放在它外面時（標記body），模態顯示，但隨後消失。但至少會發生一些事情。

Answer 1

它適合我嗎？讓我知道如果我錯過了什麼。

這可能是你的依賴版本的問題？

$(document).ready(function(){ 
 
    $('#rent-php').on('click', '.bike-rent-btn', function(){ 
 
     $('#confirm-rent-modal').modal('show'); 
 
    }); 
 
});

.container-fluid{ 
 
    height: 100vh; 
 
    margin: 0; 
 
    padding: 30px; 
 
    background-color: #EEEEEE; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 

 
<div class="container-fluid"> 
 
    <button type="button" class="btn btn-primary btn-md bike-rent-btn" data-toggle="modal" data-target="#confirm-rent-modal">Rent</button> 
 

 
    <div class="modal fade modal-sm" id="confirm-rent-modal" role="dialog"> 
 
     <div class="modal-dialog"> 
 
      <div class="modal-content"> 
 
       <div class="modal-header"> 
 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
        <h4 class="modal-title"></h4> 
 
       </div> 
 
       <div class="modal-body"> 
 
        <p></p> 
 
       </div> 
 
       <div class="modal-footer"> 
 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
       </div> 
 
      </div> 
 
     </div>   
 
    </div> 
 
</div>