Question

在观看教学视频时，我在引导程序中遇到了行和列类的问题。

视频中的讲师进行了一次有排课的div训练，并且所有项目似乎都运行良好。当尝试复制相同的东西时，我所有的物品都堆叠在一个单独的列中，而不是多个。即使浏览器全屏显示。

出现问题的地方是视频（https://www.youtube.com/watch?v=-edmQKcOW8s&t=19375s）的链接，网址为1:51:52。

任何帮助将不胜感激

export default class ProductList extends Component {
  render() {
    return (
      <React.Fragment>
        <div className="py-5">
          <div className="container">
            <Title name="our" title="products" />
            <div classname="row">
                <ProductConsumer>
                  {value => {
                    return value.products.map(product => {
                      return <Product key={product.id} product=
                      {product} />
                    })
                  }}
                </ProductConsumer>
              </div>
            </div>
          </div>
      </React.Fragment>
    )
  }
}

预期结果是在全屏浏览器上，项目将在4列中列出。

Answer 1

  <div classname="row">

您在这里有错字。应该是className。

第二，您的代码中没有col类。尝试添加以下内容：

return(
    <div className="col-3">
        <Product key={product.id} product={product} />
    </div>
)

引导行/列在React应用中不起作用

1 个答案: