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

v64noz0r 于 12个月前发布在 React

关注(0)|答案(3)|浏览(140)

我是React和react-bootstrap的新手。我有一个行组件，并希望屏幕顶部之间的间距，也是个别行元素之间。我目前只是编辑它的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;

reactjs

来源：https://stackoverflow.com/questions/57832572/add-space-between-row-elements-in-react-bootstrap

3条答案

按热度按时间

bvk5enib1#

“使用gap属性在项目之间添加空格。"* https://react-bootstrap.netlify.app/docs/layout/stack

import Stack from 'react-bootstrap/Stack';

<Stack gap={3}>
    {/* your code */}
</Stack>

赞(0）回复(0）举报 12个月前

ijxebb2r2#

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

赞(0）回复(0）举报 12个月前

xwbd5t1u3#

我并不是说这是最好的解决方案，但我刚刚创建了一个CSS类，它将margin属性设置为5px，然后将其应用于需要它的Row元素。这对我来说很有效，但我欢迎更好的答案。
对于屏幕顶部和底部的空间，我所做的是创建一个“spacer”组件，我导入并使用它来创建元素之间的空间。
我知道你的意思是什么与CSS混乱虽然和这个方法可能有点“黑客”。
示例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" />

赞(0）回复(0）举报 12个月前

我来回答

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

3条答案

相关问题

热门标签

最新问答