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

时间:2019-09-07 09:53:52

标签: reactjs react-bootstrap

我是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;

enter image description here

2 个答案:

答案 0 :(得分:-1)

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

答案 1 :(得分:-1)

我并不是说这是最好的解决方案,但我刚刚创建了一个 CSS 类,该类将边距属性设置为 5px,然后将其应用于我需要的 Row 元素。这对我有用,但欢迎我提供更好的答案。

对于屏幕顶部和底部的空间,我所做的是创建一个“spacer”组件,我将其导入并用于在元素之间创建空间。

我知道你说的搞乱 CSS 是什么意思,但这种方法可能有点“hacky”。​​

示例 JSX:

      <>
        <p><strong>My Categories</strong></p>
        {
          catList.map((cat,i) => (
            <Row key={i} className="add-space">
              <Col><strong>Category {i+1}</strong></Col>
              <Col>{cat}</Col>
              <Col><Button onClick={() => removeCategory(cat)}>Remove</Button></Col>
            </Row>
          ))
        }
      </>

示例 CSS:

.add-space {
  margin: 4px;
}

示例垫片:

const Spacer = props => {
  return (
    <div style={{height:props.height}}></div>
  );
}

export default Spacer;

使用:

<Spacer height="1rem" />