使用map渲染的Bootstrap卡片无法横向并排，需实现自动换行布局

你的代码存在两个核心问题，导致卡片无法横向排列：

• HeaderInfo 未包裹在栅格列（col-*）中，作为块级元素会占满整个 row 宽度，迫使后续卡片只能从新行开始。
• 每个项目外层额外添加的 <div className="textCenter"> 是块级元素，会破坏Bootstrap栅格布局规则，让内部的 col-* 无法横向排列，最终每个卡片单独占一行。

修改后的代码 #

调整结构以符合Bootstrap栅格规范，确保col直接作为row的子元素，同时保留原有样式需求：

<div style={{ marginBottom: "100px",  marginTop: "100px" }}>
  <Wrapper id="projects">
    <div className="whiteBg">
      <div className="container2 row d-flex justify-content-center">
        {/* 标题区域用col-12占满整行 */}
        <div className="col-12">
          <HeaderInfo>
            <h1 className="font40 extraBold darkblueColor">
              Our Awesome Projects
            </h1>
            <p className="font13">
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
              diam nonumy eirmod tempor invidunt ut
              <br />
              labore et dolore magna aliquyam erat, sed diam voluptua.
            </p>
          </HeaderInfo>
        </div>

        {/* 移除多余外层div，将textCenter类移至col上 */}
        {projects.map((project, index) => (
          <div key={index} className="col-xs-12 col-sm-4 col-md-4 col-lg-4 textCenter">
            <ProjectBox
              img={urlFor(project.imgUrl)}
              title="Awesome Project1"
              text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor."
              action={() => alert("clicked")}
            />
          </div>
        ))}
      </div>
    </div>
  </Wrapper>
</div>

关键说明 #

• 给循环列表项添加key属性，符合React列表渲染的要求。
• col-xs-12确保超小屏幕下卡片占满整行，col-sm-4及以上屏幕每行显示3张卡片，超出容器宽度时自动换行。
• 把textCenter类直接绑定到col元素上，既保留文字居中样式，又不破坏栅格布局逻辑。

内容的提问来源于stack exchange，提问作者isabella-re