如何使用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>
);