Как я могу стилизовать элементы карты для отображения в justify-content-around?

Question

Я просматриваю продукты, отображая их, и justify-content-around к ним не применяется, и я использую 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>
                    );
                }

Применяется класс гибкости дисплея, но не другой, и все они не имеют поля между собой.

Как я могу заставить их отображать justify-content-around ??

Answer 1

Ваша проблема связана с тегом <hr>. Я только что обнаружил это, выполнив это воспроизведение на stackblitz . Удалите его, и он работает .

Если он вам действительно нужен, просто получите его:

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

Это зависит от bootstrap, но, конечно, вы можете сделать это generi c легко. Вам просто нужно применить его за пределами вашего гибкого контейнера:

<>
  <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 />
</>;