React 元素在添加文本时错误地改变了位置

Question

我正在 laravel 项目中创建一个简单的 React 组件，以显示我数据库中的产品缩略图。在测试我的元素时，我注意到当我添加任何类型的文本时，div 会错误地更改位置。

如上所示，每当我向我的 product-card 之一添加文本时，它会滑下页面，而空的 div 会留在上面。 [我也在使用 Bootstrap 4 和 Laravel 如果有区别的话]

我的React组件代码：

import React from 'react';
import ReactDOM from 'react-dom';


export default class Featured extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="container featured-container">
                <div className="product-card">{this.props.testdata}</div>
                <div className="product-card"></div>
                <div className="product-card">test</div>
                <div className="product-card"></div>
            </div>
        );
    }
}

var data = $('#featured').data("testdata");

if (document.getElementById('featured')) {
    ReactDOM.render(<Featured testdata={ data } />, document.getElementById('featured'));
}

部分应用CSS:

.product-card{
        background-color: rgb(221, 210, 179);
        display: inline-block;
        width: 250px;
        height: 300px;
        border: 2px solid red;
        margin-left:10px;
        margin-right: 10px;
    }

我是 React 前端的新手，谁能向我解释为什么这是标准行为以及如何解决它？

Answer 1

给 container 以下样式：

.container{
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  flex-direction: row;
}

工作示例：Stackblitz

React 元素在添加文本时错误地改变了位置

React element incorrectly changes position when adding text

javascript

css

position

laravel

reactjs