首页 文章

从bootstrap模式中删除所有填充

提问于
浏览 次
0

您好我如何从bootstrap模式中删除所有填充和页边距，页脚和页眉空间 . 所有我想看到的是身体修复完全符合我的内容 . 提前致谢 . 我使用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>
javascript html css twitter-bootstrap-3 bootstrap-modal

1 回答

  • 1

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

    为此，您应该处理 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>
    回复于

相关问题