Space 列中元素之间反应引导程序

Question

我希望有许多横跨整个屏幕的小按钮。我目前的设置是这样的

<Row>
    <Col>
        <label className="btn btn-light btn-sm" style={{fontSize: "10px" }}>button text</label>
        <label className="btn btn-light btn-sm" style={{fontSize: "10px" }}>button text</label>
        <label className="btn btn-light btn-sm" style={{fontSize: "10px" }}>button text</label>
        <label className="btn btn-light btn-sm" style={{fontSize: "10px" }}>button text</label>
        ... and so on
    </Col>
</Row>

效果是实现了，但是按钮都相互接触。有什么方法可以强制在列的各个元素周围填充？我似乎无法弄清楚把它放在哪里。谢谢

Answer 1

你有很多可能性。您可以使用 margin 或 padding 或者 - 我更喜欢 - 使用 flexbox with gap 属性:

您可以使用给定的 bootstrap 类并使 Col 成为 flexbox 并使用间隙属性: <Col className="d-flex gap-2">
还有一个名为 Stack 的组件：<Stack direction="horizontal" gap={2}>
或者，如果您需要自定义间距大小，请直接使用 css 任何方式。例如内联样式：<Col className="d-flex" style={{ gap: "13px" }}>

https://codesandbox.io/s/beautiful-darkness-91d2ho

Space 列中元素之间反应引导程序

Space between elements in a column react boostrap

javascript

twitter-bootstrap

reactjs

react-bootstrap