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

这就是你如何定义一个模态，设计它并触发它：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

通过定位其类来自定义Bootstrap模式

1 个答案: