如何设置地图项的样式以在 justify-content-around 中显示？

Question

我通过映射产品来循环访问它们，而 justify-content-around 不适用于它们，我在我的 react 项目中使用 bootstrap 4。

这是我的代码：

{props.products.map((item) => {
                if (item.inCart) {
                    return (
                        <div className="d-flex justify-content-around w-100" key={item.id}>
                            <button>remove</button>
                            <div>
                                <h5>{item.name}</h5>
                            </div>
                            <div>
                                <h5>{item.price.toLocaleString('ar-EG')}</h5>
                            </div>
                            <div>
                                <h5>{item.number.toLocaleString('ar-EG')}</h5>
                            </div>
                            <div>
                                <h5>{(item.number * item.price).toLocaleString('ar-EG')}</h5>
                            </div>
                            <hr />
                        </div>
                    );
                }

显示 flex 类适用，但不是另一个，它们之间没有边距。

如何让它们显示 justify-content-around ？？

Answer 1

您的问题来自<hr> 标签。我刚刚通过this repro on stackblitz 发现了它。 删除它就可以了。

如果你真的需要它，那就重新使用它吧：

const Divider = () => {
  return <div className="border-bottom" />;
};

这个依赖于引导程序，但您当然可以轻松地使其通用。你只需要将它应用到你的 flex 容器之外：

<>
  <div className='d-flex justify-content-around' key={item.id}>
    <button>remove</button>
    <h5>{item.name}</h5>
    <h5>{item.name}</h5>
    <h5>{item.name}</h5>
  </div>
  <Divider />
</>;