Question

我的页面有一个引导模式。但是，每当我打开和关闭该模式时，它都会调整整个页面的大小（向左）。请参阅此图片Content shift，以更好地理解。每当我单击“过滤器”按钮时，页面都会调整大小。（当我打开和关闭模式时，红色包围的区域会增加）。

此外，请参考此图像。 Modal pop up。每当我打开模态对话框时，主页的滚动条就会消失。

html代码如下：

{% extends "base.html" %}
{% block body %}
<section class="content-header">
  <div class="row">
    <div class="box-header with-border">
        <h3 class="box-title"><strong>Monthly Recap Report</strong></h3>
        <div class="box-tools pull-right">
          <div class="btn-group">
            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal--slideSpeedRight"><i class="fa fa-filter"></i></button>

            <!-- Modal -->
            <div class="modal fade" id="myModal--slideSpeedRight" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
              <div class="modal-dialog modal-lg">

                <!-- Modal content-->
                <div class="modal-content">
                  <div class="modal-header">
                    <h4><strong>Filter</strong></h4>
                  </div>
                  <div class="modal-body">
                    <!-- content  -->
                  </div>
                  <div class="modal-footer">
                    <button class="btn btn-primary">Apply</button>
                    <button class="btn btn-primary" data-dismiss="modal">Close</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
</section>
{% endblock %}

我尝试添加

.modal-open{
  padding-right: 0 !important;
  overflow-y: auto;
 }

但是，它不起作用。请指导我解决此问题

谢谢

打开和关闭引导程序模式会调整我的内容大小

0 个答案: