Question

由于某种原因，我的代码在加载Glyphicon时导致了react-bootstrap Button的大小调整。

这是我的代码：

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时。

但是Button的加载部分的大小应该只是相对于非加载Button的大小，例如this。

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

Answer 1

我的问题是由于多个CSS类名被称为“旋转”。

应用Glyphicon时，React-Bootstrap按钮的大小会调整

1 个答案: