Question

我的代码下面有一个显示模态的链接。但是如果屏幕尺寸很小，则存在一个问题：模态页脚中的关闭按钮和模态标题中的关闭图标出现。但是大尺寸不会出现。

你知道为什么吗？

如果不使用按钮，则使用以下链接：<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/

Answer 1

Bootstrap使用名为Glyphicons的图标。您正在使用字体真棒图标fa-plus。使用Glyphicons字体或以您的风格导入font-awesome。

你知道为什么关闭按钮和关闭图标没有大尺寸？

1 个答案: