React/NextJS中Bootstrap卡片横向排列布局问题求助

Hey，我来帮你搞定这个卡片排列的问题！你现在遇到的情况是每张卡片都上下叠着，根本原因是你在每个Product组件里都单独放了container和row——Bootstrap的栅格系统是需要把所有要横向排列的列（col）放在同一个row下面的，你现在每个产品都占了一整行，当然会上下堆起来啦！

我给你调整一下代码，分两步来改：

第一步：修改Product组件的结构 #

把组件里多余的container和row去掉，只保留列（col）和卡片的部分，因为这些列应该放在父组件的统一row里：

import React from 'react'
import Link from 'next/link'
import { urlFor } from '../lib/client'

const Product = ({product: { image, name, details, slug, price}}) => {
  return (
    <div className='col-sm-4 col-lg-4 mb-4'> {/* 加个mb-4给卡片之间留垂直间距 */}
      <div className="card bg-transparent text-light border-light h-100"> {/* h-100让卡片等高 */}
        <div className="card-body text-center d-flex flex-column justify-content-between"> {/* 让内容垂直分布更美观 */}
          <Link href={`/product/${slug.current}`}>
            <img className='bg-transparent img-fluid mb-3' src={urlFor(image && image[0])} alt={name} /> {/* 加alt属性更友好 */}
          </Link>
          <h5 className="card-title text-light">{name}</h5>
          <p className="card-text text-light">{details}</p>
          <p className='card-text text-light'>{price} HUF Br.</p>
          <Link href={`/product/${slug.current}`}>
            <button className='btn btn-outline-light btn-lg mt-auto'>Érdekel</button> {/* mt-auto让按钮固定在卡片底部 */}
          </Link>
        </div>
      </div>
    </div>
  )
}

export default Product

第二步：在父组件里统一控制布局 #

你需要在渲染Product列表的父组件中，把所有Product放在同一个container和row下面，比如像这样：

// 示例父组件（比如ProductsList.js）
import Product from './Product'

const ProductsList = ({products}) => {
  return (
    <div className='container py-5'>
      <div className='row'>
        {products.map(product => (
          <Product key={product._id} product={product} />
        ))}
      </div>
    </div>
  )
}

export default ProductsList

为什么这样改就生效了？ #

• Bootstrap的栅格逻辑是：container → row → col-*，所有要横向排列的列必须在同一个row下，这样row才会自动把col按宽度分配在同一行，超过宽度就换行。
• 我还给卡片加了h-100让所有卡片高度一致，mt-auto让按钮固定在底部，这样布局会更整齐好看。

你试试这样改，应该就能让卡片横向并排啦！我之前刚学Bootstrap的时候也踩过这个嵌套错误的坑，很容易犯～

备注：内容来源于stack exchange，提问作者Dániel Szalai