Bootstrap布局卡片排列异常：设置每行3张却仅显示1张

问题根因 #

你的布局逻辑错误，col-lg-4 col-md-4 col-sm-6 这个栅格列类需要作用在每个独立卡片的外层容器上，你当前把所有卡片（包括循环渲染的卡片和最后的申请卡片）都塞进了同一个栅格列里，所有卡片在同一列内垂直堆叠，自然每行只会显示1张卡片。

修正方案 #

把栅格列容器挪到循环内部，每个卡片单独包裹栅格列类，最后的额外卡片也单独套栅格列即可，修正后代码如下：

<div className="container">
  <div className="row">
    {/* 循环渲染卡片，每个卡片单独套栅格列 */}
    {posts &&
      posts.map((test) => (
        <div className="col-lg-4 col-md-4 col-sm-6" key={test.id}>
          <div style={{ padding: "40px" }}>
            <div className="citizen-item">
              <div className="card">
                <img
                  style={{
                    height: "100%",
                    width: "100%",
                    minHeight: "180px",
                    objectFit: "cover"
                  }}
                  src={test.backgroundImage}
                  alt={test.Title}
                />
                <div>{test.Title}</div>
                <div>Access to 151</div>
                <div>
                  <button className="findButton">FIND OUT MORE</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      ))}

    {/* 单独的申请卡片也套栅格列 */}
    <div className="col-lg-4 col-md-4 col-sm-6">
      <div style={{ padding: "40px" }}>
        <div
          className="citizen-item"
          style={{ height: "100%", minHeight: "348.8px" }}
        >
          <div>
            <div>CARIBBEAN CITIZENSHIP</div>
            <div>
              <button className="findButton">APPLY NOW</button>
            </div>
            <div>COMPARE PROGRAMS</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

补充说明 #

• Bootstrap栅格系统的row下直接子元素应该是带col-*类的容器，每一个col-*容器会按照设置的宽度占比排布，一行总占比为12，col-lg-4就是大屏下每个占1/3宽度，刚好每行3个
• 循环生成的元素记得把key属性放在循环的最外层根元素上，符合React开发规范

内容的提问来源于stack exchange，提问作者Jay Modi