React新手使用react-bootstrap实现每行展示3张用户卡片的问题

React Bootstrap 采用12列栅格布局规则，你当前代码所有用户卡片都放在同一个Col组件内，所以会单列垂直排列。只需调整遍历逻辑，给每个卡片外层套一个宽度为4列的Col组件，即可实现一行3个的排布效果。

修改后的完整代码 #

import Axios from 'axios';
import React, { useEffect, useState } from 'react';
import * as ReactBootStrap from 'react-bootstrap';

import User from '../components/cards';

const HomePage = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    Axios.get('some-url-to-get-data')
      .then(res => setUsers(res.data));
  }, [])

  return (
    <ReactBootStrap.Container>
      <ReactBootStrap.Row className="gy-4">
        {users.map(user => (
          <ReactBootStrap.Col xs={12} sm={6} md={4} key={user.username}>
            <User user={user}/>
          </ReactBootStrap.Col>
        ))}
      </ReactBootStrap.Row>
    </ReactBootStrap.Container>
  )
}

export default HomePage;

改动说明 #

• 移除了原来包裹所有卡片的单个Col组件，将遍历逻辑直接放在Row组件下
• 每个用户卡片外层新增Col组件，md={4} 表示在中等及以上屏幕尺寸下，每个列占4格宽度，12/4=3刚好放下3个卡片
• 额外新增的xs={12} sm={6}是响应式适配：超小屏一行放1个，小屏一行放2个，不需要可以删掉
• Row上的gy-4用来设置行之间的纵向间距，避免上下行卡片贴在一起，也可以给Col加className="mb-4"实现同样效果
• 如果卡片没有自动撑满列宽度，可以给User组件的根元素加w-100类名，让卡片宽度适配列宽

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