Bootstrap Modal不工作，但模式sm是

Question

我有一个引导模式SM，我已经做了，但现在我想改变它为一个更大的宽度正常模态。

当我删除类'modal-sm'并替换为'模态'时，背景会变暗，但实际的模态不显示。

如果我手动进入Web检查器并取消选中.modal上的“display：none”，我可以看到正确的模态弹出。

任何想法，为什么这不像它应该这样做？

<a href="#" data-toggle="modal" data-target=".modal-gallery-<?= $shoots[1]['id'] ?>">Buy Gallery</a> 


<!-- MODALS --> 
<div class="modal fade modal-gallery-<?= $shoots[1]['id'] ?> in" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> 
<div class="modal-dialog modal"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 
     </div> 
     <div class="modal-body downloads"> 
      <div class="buttons"> 
       <div class="form-group"> 
        <h2>test</h2> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</div> 

Answer 1

你需要从内div删除.modal-sm - 如：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<!-- Small modal --> 
 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">regular modal</button> 
 

 
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> 
 

 
<!-- remove modal-sm from here to get normal size --> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Small size</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div><!-- /.modal-content --> 
 
    </div> 
 
</div>

来源：Bootstrap Documentation