目前我有一個bootstrap容器，我在行標簽內有卡片視圖。我希望每一行都有3張卡片，距離相等，并且在中間。為了達到這個目的，我使用了<div class="col-lg-4 col-md-4 col-sm-6">但是由于某些原因，它在每行放置了1張卡片，而不是3張。
CodeSandbox: https://codesandbox.io/s/musing-haze-j9vvn?file=/src/App.tsx
代碼：
<div className="container"> /span>
<div className=" row">
<div className="col-lg-4 col-md-4 col-sm-6">
{posts &&
posts.map((test) => (
<div style={{ padding:/span> "40px" }}>
<div className="city-item" key={test. id}>
<div className="card"/span>>
<img
style={{}。
高度: "100%"。
width: "100%",
minHeight: "180px"。
objectFit: "cover"
}}
src={test.backgroundImage}>
/>
<div>
{test.Title}
</div> {test.Title} </div>
<div>/span>
訪問151
</div>進入151號公路。
<div>/span>
<button className="findButton"/span>> 查找更多</button>。
</div>/span>
</div>/span>
</div>/span>
</div>/span>
))}
{/*查找更多卡片 */}
<div style={{ padding:/span> "40px" }}>
<Div
className="citizen-item"。
style={{ height: "100%", minHeight: "348。 8px" }}
>
<div>/span>
<div>
加勒比海公民權
</div>/span>加勒比海地區公民身份
<div>/span>
<button className="findButton"/span>> 現在就申請</button>。
</div>/span>
<div>/span>
比較程式
</div>比較程式
</div>/span>
</div>/span>
</div>/span>
</div>/span>
</div>/span>
</div>/span>
uj5u.com熱心網友回復：
看起來你已經將容器限制為col-md-4, col-lg-4。這迫使卡片轉到下一行，因為容器只有4列寬。容器應該跨度為12列，以便能夠在一行中容納多張卡片。
所以我在你的卡片上添加了以下內容
我為你的容器添加了以下代碼，使其跨度達到12列
請參考下面的鏈接，在做了上述改動后，作業正常了
https://codesandbox.io/s/practical-satoshi-46gt8?file=/src/App.tsx轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/309220.html
標籤：
上一篇：位置：粘性和邊框