css - 通过定位其类来自定义 Bootstrap 模态

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，请尝试不使用。