通过以类为目标自定义引导模式

Question

我试图通过添加另一个类并在其中定位另一个div类来自定义Bootstrap的模态。但是，我不知道为什么没有应用任何样式。

<div id="myModal1" class="modal custom-modal fade">
    <div class="modal-content text-center">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Title</h4>
        </div>
        <div class="modal-body">
          <div class="container">
            <div class="row">
              <img src="img/proj1.jpg" class="img-responsive"/>
            </div>
          </div>
        </div>
    </div>
</div><!-- /.modal -->
CSS
.custom-modal .modal-content {
  padding:20px 0; 
}

知道吗？任何帮助都将不胜感激！

Answer 1

这就是定义模态、设置样式和激发它的方法：

$(document).ready(function() {
    $('#myModal').modal();
});

.modal-body {
  padding: 70px !important; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.css" />
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <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" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut erat diam. Aenean tempus diam facilisis, sollicitudin augue quis, ultricies nibh. Maecenas molestie augue eu risus vulputate luctus. In vestibulum ac nibh quis accumsan. Praesent fermentum risus id sodales sagittis. Mauris non neque porttitor, congue tortor nec, tincidunt sapien. Suspendisse vel condimentum ligula. Praesent at semper risus. Fusce vel ex in eros tempus porttitor nec in nisi. Vestibulum vel justo eget odio fermentum maximus vel ut nisi. Nam consectetur vehicula nisi, ut pellentesque leo pharetra in. Vestibulum nunc lectus, vulputate a odio tempus, euismod dictum dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam interdum lacinia urna at convallis. Quisque in metus id turpis mattis pretium.
      </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>
  </div>
</div>

请注意：可能不需要使用!important，请尝试不使用。