应用 Glyphicon 时 React-Bootstrap 按钮调整大小答案

【问题标题】：React-Bootstrap Button resizes when Glyphicon is applied应用 Glyphicon 时 React-Bootstrap 按钮调整大小
【发布时间】：2018-12-14 06:37:40
【问题描述】：

由于某种原因，当加载时应用 Glyphicon 时，我的代码会导致 react-bootstrap 按钮调整大小。

这是我的代码：

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.css

.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); }
}

这就是奇怪的地方......

Search.js

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>
    );
}

Search.css

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

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

因此，开发服务器将 Button 显示为 this 当 isLoading 等于 true 时。

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

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

【问题讨论】：

标签： javascript css reactjs frontend react-bootstrap

【解决方案1】：

我的问题是由于多个名为“spinning”的 css 类名造成的。

【讨论】：