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

Question

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%）。我该如何解决这个问题？感谢您的关注。

Answer 1

去除style="width: 150%;"

Answer 2

尝试max-width: 150%;而不是width: 150%;那个<div class="modal-dialog" style="max-width: 150%;">&nbsp; &nbsp; <div class="modal-content">&nbsp; &nbsp; &nbsp; <div class="modal-body">&nbsp; &nbsp; &nbsp; &nbsp; Minimise this window to see the defect. After minimise, the width is not 100%&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </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">&nbsp; <div class="modal-dialog" style="max-width: 150%;">&nbsp; &nbsp; <div class="modal-content">&nbsp; &nbsp; &nbsp; <div class="modal-body">&nbsp; &nbsp; &nbsp; &nbsp; Minimise this window to see the defect. After minimise, the width is not 100%&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <!-- Modal with tab -->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>&nbsp;&nbsp;

Answer 3

我编辑这个答案好吗？解决方案是用下面的代码添加一个类并删除内联样式.myModal {&nbsp; &nbsp;margin-left: 0&nbsp;}我刚刚试过了，它有效问题是 bootstrap 为这些尺寸添加了边距，只需将其设置为 0