Css 如何将左侧的用户名和右侧的点与React bootstrap ListGroup对齐？

我有一张

地图

，上面有所有用户及其积分

我的代码如下所示：

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

返回(
{data.map（（用户，索引）=>(
{user.name}:{user.total_points}
))}
);

现在它看起来像这样：

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

我怎样才能得到左边的用户名和右边的分数？

---

点数显示为

0

如果是引导，则通过包装

0

或

用户，已经有一个名为
的右浮动
。在
或类似元素中的总点数

：

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

返回(
{data.map（（用户，索引）=>(
{user.name}:{user.total_points}
))}
);

it not working:/I将{user.total_points}包装在内部，但结果相同。但是这一个有效{user.total_points}，谢谢你的帮助！我正在使用“反应引导”：“^0.32.4”