reactjs - 在 React BootStrap 中的行元素之间添加空格

Question

我是 React 和 react-bootstrap 的新手。我有一个 Row 组件，想要在屏幕顶部和各个行元素之间留出间距。我目前正在编辑它的 CSS，但听说乱用框架的 CSS 可能不好？

const Styles = styled.div`
  .background {
    background: url(${backgroundImage}) no-repeat fixed bottom;
    background-size: cover;
    height: 100vh;
    position: relative;
  }

  #row {
    position: relative;
    top: 200px;
  }
`;

class Signup extends React.Component {
  render() {
    return (
      <Styles>
        <div className="background">
          <Container>
            <Row id="row" className="justify-content-md-center">
              <ExtraInfo />
              <SignupForm />
            </Row>
          </Container>
        </div>
      </Styles>
    );
  }
}

export default Signup;

Answer 1

在 React-Bootstrap 中使用 Form.Group。它在列上添加 15px 的填充以分隔列的内容。