使用Bootstrap 4 / Viewport单位减少模态的视口大小

Question

我在模态

中使用带有Laravel渲染视图的Bootstrap 4

我希望模态占据100％的宽度并让Bootstrap自动填充空间并根据模态的视口宽度调整大小（仅在模态内）

所以基本上我要问的是如何设置Bootstrap（和视口单元）在不基于文档视口而不是父元素的模态中响应？

https://jsfiddle.net/hcjuprxv/3/

<div class="container-fluid">
<div class="modal fade" tabindex="-1" role="dialog" id="modal" aria-
hidden="true" style="width: 100%; height: auto;">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Temporary Name</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="container-fluid">
            <div class="row">
              <div class="col">
                <h1>
                This is a realllly long line of text that I hope you can see will make an example of what I'm trying to make an example out of
                </h1>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
 <div class="row">
   <div class="col">
     <button class="btn btn-primary" type="button" data-toggle="modal" data-target="#modal">
            Toggle Modal
          </button>
   </div>
 </div>
 </div>

我做了一个小提示，告诉你我的意思，但主要问题是bootstrap无法识别模态的缩小窗口大小，视口单元也没有

如果有人知道为什么Bootstrap不会适应100％的模态宽度，那将是值得赞赏的

由于

• 扎克