css - 如何使用 React bootstrap ListGroup 对齐左侧的用户名和右侧的点？

Question

我有一个 map ，可以获取所有用户及其点数。

我的代码是这样的:

return (
   <ListGroup>
     {data.map((user, index) => (
       <ListGroupItem key={index}>
         <b>
           {user.name} : {user.total_points}
         </b>
       </ListGroupItem>
     ))}
   </ListGroup>
);

现在它看起来像这样:

如何获取左侧的用户名和右侧的积分？这些点显示为 0。

Answer 1

如果是Bootstrap，已经有float utility class了称为 float-right , 通过包装 0或 user.total_points在 <span> 里面或类似元素:

return (
   <ListGroup>
     {data.map((user, index) => (
       <ListGroupItem key={index}>
         <b>
           {user.name} : <span className="float-right">{user.total_points}</span>
         </b>
       </ListGroupItem>
     ))}
   </ListGroup>
);