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

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%;">

    <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>

  

Answer 3

我编辑这个答案好吗？

解决方案是用下面的代码添加一个类并删除内联样式

.myModal {

   margin-left: 0

 }

我刚刚试过了，它有效

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