Javascript 应用Glyphicon时，“反应引导”按钮会调整大小

由于某些原因，我的代码会在加载时应用Glyphicon时导致react引导按钮调整大小

这是我的密码：

LoaderButton.js

import React from "react";
import { Button, Glyphicon } from "react-bootstrap";
import "./LoaderButton.css";

export default ({
  isLoading,
  text,
  loadingText,
  className = "",
  disabled = false,
  ...props
}) => (
  <Button
    className={`LoaderButton ${className}`}
    disabled={disabled || isLoading}
    {...props}
  >
    {isLoading && <Glyphicon glyph="refresh" className="spinning" />}
    {!isLoading ? text : loadingText}
  </Button>
);

.LoaderButton .spinning.glyphicon {
    margin-right: 7px;
    top: 2px;
    animation: spin 1s infinite linear;
}
  @keyframes spin {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1) rotate(360deg); }
}

renderForm() {
    return (
      <div className="TableQuery">
        <form onSubmit={this.handleSubmit}>
          <LoaderButton
            block
            bsSize="large"
            disabled={!this.validateForm()}
            type="submit"
            isLoading={this.state.isLoading}
            text={this.state.text}
            loadingText="Processing changes..."
          />
        </form>
      </div>
    );
}

@media all and (min-width: 480px) {
  .TableQuery {
    padding: 5px 0;
  }

  .TableQuery form {
    margin: 0 auto;
    max-width: 300px;
  }
}

这就是奇怪的地方

Search.js

import React from "react";
import { Button, Glyphicon } from "react-bootstrap";
import "./LoaderButton.css";

export default ({
  isLoading,
  text,
  loadingText,
  className = "",
  disabled = false,
  ...props
}) => (
  <Button
    className={`LoaderButton ${className}`}
    disabled={disabled || isLoading}
    {...props}
  >
    {isLoading && <Glyphicon glyph="refresh" className="spinning" />}
    {!isLoading ? text : loadingText}
  </Button>
);

.LoaderButton .spinning.glyphicon {
    margin-right: 7px;
    top: 2px;
    animation: spin 1s infinite linear;
}
  @keyframes spin {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1) rotate(360deg); }
}

renderForm() {
    return (
      <div className="TableQuery">
        <form onSubmit={this.handleSubmit}>
          <LoaderButton
            block
            bsSize="large"
            disabled={!this.validateForm()}
            type="submit"
            isLoading={this.state.isLoading}
            text={this.state.text}
            loadingText="Processing changes..."
          />
        </form>
      </div>
    );
}

@media all and (min-width: 480px) {
  .TableQuery {
    padding: 5px 0;
  }

  .TableQuery form {
    margin: 0 auto;
    max-width: 300px;
  }
}

因此，开发服务器将该按钮显示为 当isLoading等于true时

然而，按钮的加载部分的大小应该只是相对于非加载按钮的大小

---

有什么方法可以在加载按钮时降低按钮的顶部吗？

我的问题是由于多个名为“旋转”的css类名引起的