如何将左侧的用户名和右侧的点与 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-right 的 float utility class，方法是将 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>
);