如何解决选项卡模态宽度问题？答案

【问题标题】：How to fix tab modal width issue?如何解决选项卡模态宽度问题？
【发布时间】：2021-01-12 16:52:02
【问题描述】：

https://codepen.io/Maximusssssu/pen/mdPoKZe

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal-with-tab">Modal with tabs</button>

<!-- Modal with tab -->
<div id="modal-with-tab" class="modal modal-with-tab fade" role="dialog">
  <div class="modal-dialog" style="width: 150%;">

    <div class="modal-content">
      <div class="modal-body">
        Minimise this window to see the defect. After minimise, the width is not 100%
      </div>

    </div>
  </div>

  <!-- Modal with tab -->
  
  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

上面的代码工作正常。但是，当窗口最小化时，宽度会发生变化（不再是 100%）。我该如何解决这个问题？感谢您的关注。

【问题讨论】：

移除内联样式style="width: 150%;"（模态溢出屏幕）。也许相关：stackoverflow.com/questions/34014891/…。如果这些细节没有帮助，请添加所需结果的屏幕截图。

标签： javascript html css

【解决方案1】：

尝试使用max-width: 150%; 而不是width: 150%;

<div class="modal-dialog" style="max-width: 150%;">
    <div class="modal-content">
      <div class="modal-body">
        Minimise this window to see the defect. After minimise, the width is not 100%
      </div>
    </div>
</div>

工作演示

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal-with-tab">Modal with tabs</button>

<!-- Modal with tab -->
<div id="modal-with-tab" class="modal modal-with-tab fade" role="dialog">
  <div class="modal-dialog" style="max-width: 150%;">

    <div class="modal-content">
      <div class="modal-body">
        Minimise this window to see the defect. After minimise, the width is not 100%
      </div>

    </div>
  </div>

  <!-- Modal with tab -->
  
  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

【讨论】：

【解决方案2】：

我编辑这个答案好吗？

解决办法是用下面的代码添加一个类，去掉内联样式

.myModal {
   margin-left: 0
 }

我试过了，效果很好

问题在于 bootstrap 为这些尺寸添加了边距，只需将其设置为 0

【讨论】：

【解决方案3】：

删除style="width: 150%;"

【讨论】：

这不是答案，你放的是评论，请尝试在你的答案中添加一点描述。