Question

当我像这样使用bootstrap的模态时：

<style>
.modal-content {
  border-radius: 60px;
}
</style>

<div id="upload-loading" class="modal" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button id="loadingClose" type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Upload in progress...</h4>
            </div>
        </div>
    </div>
</div>

它显示下划线like this

我尝试添加这种风格

<style>
.modal-content, .modal-content * {
  text-decoration: none !important;
}
</style>

但它似乎没有任何区别......

Answer 1

 .modal-content {border: 0px solid rgba(0, 0, 0, 0.2);}

Answer 2

只需为 .modal-header 类设置边框

我只是在 React 中解决了

<div>
        {/* Button trigger modal */}
        <button type="button" className="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
          Launch demo modal
        </button>
        {/* Modal */}
        <div className="modal fade" id="exampleModalCenter" tabIndex={-1} role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
          <div className="modal-dialog modal-dialog-centered" role="document">
            <div className="modal-content">
              <div className="modal-header" style={{border:"1px solid #fff"}}>
                <h5 className="modal-title" id="exampleModalLongTitle">Buy Premium</h5>
                <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">×</span>
                </button>
              </div>
              <div className="modal-body">
                <p>Your account is limited to only 3 CV views. 
                To review more, purchase Premium Subscription</p>
                <button className="btn btn-primary">Purchase</button>
              </div>
              <div className="modal-footer">
                <button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
      </div>

如何删除bootstrap模态下划线？

2 个答案: