我希望有許多小按鈕橫跨整個螢屏。我的設定目前是這樣的
<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>
效果達到了，但是按鈕都是互相接觸的。有什么方法可以強制在 Column 的各個元素周圍進行填充？我似乎無法弄清楚該放在哪里。謝謝。
uj5u.com熱心網友回復：
你有很多可能性。您可以使用邊距或填充，或者 - 我更喜歡 - 使用帶有 gap 屬性的 flexbox：
- 您可以使用給定的引導類并使 Col 成為彈性盒并使用 gap 屬性：
<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
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/485904.html
標籤：javascript 反应 推特引导 反应引导
上一篇：HTML/引導布局
下一篇：引導輪播和列不會彼此相鄰