我来帮你搞定这个布局问题！你的代码里有几个关键问题导致布局不符合预期，还引发了编译错误，咱们一步步修正：

先说说原代码里的核心问题： #

• CardGroup与Bootstrap Grid混用冲突：CardGroup是用来让卡片等高对齐的组件，但你同时用了Row/Col的Grid系统，两者的布局逻辑会互相干扰。
• 错误的循环嵌套：你在遍历dishes时又嵌套了Array.from({ length: 4 })，这会让每个菜品都生成4张重复卡片，完全偏离了需求。
• 缺失必要组件导入：代码里用了Row和Col但没导入，这肯定会触发编译错误。
• Key属性位置错误：React列表的key要放在循环的最外层元素上，你现在把key加在了Card上，不符合规范。
• 重复且不合理的样式设置：Card上写了两个style属性，后面的会覆盖前面的，而且width: '100em'会让卡片宽到离谱，破坏布局。

修正后的完整代码 #

import { React } from 'react';
import { Card, Button, Row, Col } from 'react-bootstrap'; // 新增Row和Col的导入
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';

const MyDishes = props => {
  const { dishes } = props;
  
  // 如果没有菜品，返回提示信息，提升用户体验
  if (dishes.length === 0) {
    return <p>还没有添加任何菜品哦～</p>;
  }

  return (
    <Row className="g-4"> {/* g-4控制卡片之间的间距 */}
      {dishes.map(d => (
        // key放在最外层的Col上，确保React正确追踪列表项
        <Col xs={12} sm={6} md={3} key={d.id}>
          <Card>
            <Card.Img variant="top" src={d.attributes.picture} />
            <Card.Body>
              <Card.Title>{d.attributes.name}</Card.Title>
              <Card.Text>Possibly some text here</Card.Text>
              <Link to={`/dishes/${d.id}`}>
                <Button variant="primary">Full Recipe</Button>
              </Link>
            </Card.Body>
          </Card>
        </Col>
      ))}
    </Row>
  );
};

const mapStateToProps = state => {
  return { dishes: state.myDishes };
};

export default connect(mapStateToProps)(MyDishes);

关键改动说明： #

1. Grid布局控制：通过Col的断点属性实现响应式布局：
   • xs={12}：移动端（超小屏幕）每行1个卡片
   • sm={6}：平板（小屏幕）每行2个卡片
   • md={3}：桌面端（中等及以上屏幕）每行4个卡片（因为Bootstrap的网格是12列，12/3=4）
2. 移除冗余组件：删掉了冲突的CardGroup，让Grid系统全权负责布局
3. 修正循环逻辑：直接遍历dishes数组，每个菜品对应一张卡片，去掉了多余的Array.from循环
4. 修复编译错误：新增了Row和Col的导入，解决组件未定义的问题
5. 优化样式与规范：移除了不合理的宽度设置，让Bootstrap自动适配卡片宽度；把key放在正确的位置

这样调整后，就能实现你想要的每行4个卡片的响应式布局，也不会再有编译错误啦！

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