jquery - 更改内容时停止按钮更改大小

Question

我试图让我的提交按钮在单击时切换到 Font Awesome 微调器。但是，当我这样做时，按钮变得非常小，看起来不太舒服。如何修复以防止按钮变小？

function refreshreplace() {
  $("#CMSub").html('<i class="fa fa-refresh fa-spin"></i>');
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-dialog text-muted">
  <div class="modal-content">
    <div class="modal-header">
      <button class="close" data-dismiss="modal" type="button"><span>&times;</span>
      </button>

      <h4 class="modal-title" id="myModalLabel">Contact me</h4>
    </div>

    <div class="modal-body">
      <p>Your name:</p>
      <input type="username" id="CMU" name="username">
      <br>
      <br>
      <p>Your email:</p>
      <input type="email" id="CME" name="email">
      <br>
      <br>
      <p>Your comment/message</p>
      <input type="comment" id="CMC" name="comment">
      <br>
      <br>
      <div class="text-centered">
        <button class="btn btn-sm btn-success" id="CMSub" onclick="refreshreplace()">Submit</button>
      </div>
    </div>

    <div class="modal-footer">
      <button class="btn btn-success" data-dismiss="modal" type="button" onclick="alert('You clicked the tick');"><span class="glyphicon glyphicon-ok"></span>
      </button>
      <button class="btn btn-danger" data-dismiss="modal" type="button" onclick="alert('You have clicked exit');"><span class="glyphicon glyphicon-remove"></span>
      </button>
    </div>
  </div>
</div>

View on Codepen

Answer 1

只需将此添加到您的 css 中以防止按钮的大小减小到特定值以下:

#CMSub {
    min-width: 60px;
}

这是一个带有 aove 代码的代码笔:http://codepen.io/anon/pen/pJGyWy