引导放置在容器流体

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>