你知道为什么关闭按钮和关闭图标没有出现在大屏幕上吗?

我有下面的代码,它有一个链接来显示模态。但如果屏幕尺寸较小,则会出现一个问题:模式页脚中的关闭按钮和模式页眉中的关闭图标。但是大尺寸的不会出现。

你知道为什么吗?

如果不使用按钮,而是使用如下链接: <a class="btn btn-primary" data-dismiss="modal">Close</a> 当关闭图标正确显示时,它会工作。

Html:

<a class="btn btn-primary test text-white" data-regid="1"> <i class="fa fa-plus" aria-hidden="true"></i></a>

<div class="modal fade" id="test" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title" id="exampleModalLabel">Test</h6>
        <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">
          <div class="row">
            <div class="col">
              test

            </div>
          </div>

        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/trsshs2k/