Question

您如何从引导模式中删除所有填充和页边距，页脚和页眉空格。所有我想看到的是身体修复完全符合我的内容。提前致谢。我使用bootstrap 3？我没有使用页眉和页脚元素。只有模态，模态对话，模态内容和模态。到目前为止，我有以下内容，但我的内容仍有空间。

.modal-body {
    position: relative;
    overflow-y: auto;
    margin: 0 ;
    padding: 0;
}
.modal-content{
    padding: 0;
    margin: 0;
}

HTML

            <div class="modal  fade" id="tpModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
                 aria-hidden="false">
                <div class="modal-dialog " role="document">
                    <div class="modal-content">

                        <div class="modal-body">
                            <mycontent></mycontent>
                        </div>

                    </div>
                </div>
            </div>

Answer 1

解决方案是使用jquery并在css为modal时设置triggered属性。

为此，您应该处理shown.bs.modal事件。

$('.modal').on('shown.bs.modal', function() {
   $(".modal-body").css("padding",'0px');
   $(".modal-body").css("margin",'0px');
   $(".modal-dialog").css({
              'position': 'relative',
              'display': 'table',
              'overflow-y': 'auto',    
              'overflow-x': 'auto',
              'width': 'auto',
              'min-width': '10px'
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        Lorem lorem lorem
      </div>
    </div>
  </div>
</div>

从bootstrap模式中删除所有填充

1 个答案: