我是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;
答案 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" />