Table in bootstrap 模态不适合且不显示溢出

Question

我有一个包含两列的模态框。其中一列包含 table。但是，table 不适合该列，需要水平滚动，但我需要使 table 适合该列。另外，我对滚动问题有疑问。 Table 如果项目超过模式的大小，应该可以滚动。

这里，例子的link：- https://jsfiddle.net/35wzenqf/2/

请将视图更改为 tabs(row) 以便您更容易地看到模式中的列:)

<div class="btn-group d-flex">
   <button class="btn btn-lg btn-icon btn-primary w-100" data-toggle="modal" data-target="#modal-default">
      <span class="btn-inner--icon"><i class="far fa-money-bill-alt"></i></span>
      <span class="btn-inner--text">Pay</span>
   </button>
</div>

感谢大家的帮助！

Answer 1

增加勋章大小

enter link description here

<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>

<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Answer 2

感谢 Ferikeem 和 Hamid 的帮助！

这些是我的问题的答案：-

将 modal-lg 更改为 modal-xl，在我的代码中它不起作用我不知道为什么所以我为我的模态对话框 class 添加了 style="max-width: 1140px" .它与 bootstrap.

中的 modal-xl 大小相同

为了滚动，我需要设置高度。

.horizontal-scroll
{
    overflow-y: auto;
    height: 70vh;
}

Table in bootstrap 模态不适合且不显示溢出

Table in bootstrap modal does not fit and not display overflow

html

css

bootstrap-modal

bootstrap-4