我已經(jīng)設(shè)法使一行中的所有列都具有相同的高度，但是，我不知道如何對(duì)行做到這一點(diǎn)(見下面的截圖和代碼)。我希望在移動(dòng)視圖中，當(dāng)一行中只有一張卡片時(shí)，所有行都具有相同的高度。

<div ref={ponudbaRef} className="trending-menu-section">
    <div className="container-fluid">
        <div className="row g-3 g-lg-4">
            <>
                {data?.map((item, i) => (
                    <div className="col-sm-6 col-lg-3 d-flex" key={i}>
                        <div className={`card-body offer-item text-center`}>
                            <div className="text-center">
                                <img src={item.slika} alt="" />
                            </div>
                            <h4 className="title">
                                <Link to="/productDetails" state={{ime: item.ime}}>{item.ime}</Link>
                            </h4>
                        </div>
                    </div>
                ))}
            </>
        </div>
    </div>
</div>

這里所有的行都不同:

這里，同一行中的列具有相同的高度:

添加以下CSS:

@media only screen and (max-width: 576px) { // CSS will apply to mobile only
  .card-body {
    height: 200px; // Make all cards the same height
  }

  img {
    width: 100%; // Make the image full window width
    max-height: 150px; // But not higher than 150px
    object-fit: contain; // Preserve image aspect ratio
  }
}

觀看現(xiàn)場(chǎng)演示。

App.js

import "./styles.css";
import img1 from "./salmon3.png";
import img2 from "./rib.png";

export default function App() {
  return (
    <div className="pb-120 desert-menu-section">
      <div className="container-fluid">
        <div className="row g-3 g-lg-4">
          {data?.map((item, i) => (
            <div
              className="col-sm-6 col-lg-3 d-flex align-items-stretch"
              key={i}
            >
              <div className="card-body offer-item text-center">
                <div className="text-center">
                  <img src={item.img} alt="" />
                </div>
                <h4 className="title">
                  <p to="/productDetails" state={{ ime: item.title }}>
                    {item.title}
                  </p>
                </h4>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

const data = [
  {
    img: img1,
    title: "Juicy Beef Burger Meal"
  },
  {
    img: img2,
    title: "Choko Milkshake From Heaven"
  }
];

樣式. css

.App {
  font-family: sans-serif;
  text-align: center;
}

.container {
  position: relative;
  z-index: 1;
}

@include breakpoint(xl) {
  .container {
    max-width: 1260px;
    padding-left: 15px;
    padding-right: 15px;
  }
}

@include breakpoint(max-lg) {
  .container,
  .container-fluid {
    padding-inline: 30px;
  }
}

.pb-120 {
  padding-bottom: 120px;
  @include breakpoint(max-lg) {
    padding-bottom: 90px;
  }
}

@include breakpoint(max-md) {
  .desert-menu-section {
    padding-top: 40px;
  }

  .trending-menu-section {
    padding-top: 140px;
  }

  .layer-section {
    padding: 140px 0 130px;
    .btn-base {
      font-size: 18px;
      padding: 10px 45px;
    }
  }
}

/* Added */
@media only screen and (max-width: 576px) {
  .card-body {
    border: 1px solid red;
    height: 200px;
  }

  img {
    width: 100%;
    max-height: 150px;
    object-fit: contain;
  }
}

您可以使每一行(col-sm-6 col-lg-3 d-flex)成為一個(gè)flex容器，然后應(yīng)用align-items: stretch，這是flex容器的默認(rèn)行為。這使得每張卡片(在此上下文中為flex項(xiàng)目)拉伸到該行中最高項(xiàng)目的高度。因?yàn)榭ㄆW(wǎng)格中的每一行都是一個(gè)新的flex容器，這確保了每一行中的所有卡片都具有相同的高度。但是，它不能確保不同行中的卡具有相同的高度。

<div ref={ponudbaRef} className="trending-menu-section">
    <div className="container-fluid">
        <div className="row g-3 g-lg-4">
            {data?.map((item, i) => (
                <div className="col-sm-6 col-lg-3 d-flex align-items-stretch" key={i}>
                    <div className={`card-body offer-item text-center d-flex flex-column`}>
                        <div className="text-center">
                            <img src={item.slika} alt="" />
                        </div>
                        <h4 className="title mt-auto">
                            <Link to="/productDetails" state={{ime: item.ime}}>{item.ime}</Link>
                        </h4>
                    </div>
                </div>
            ))}
        </div>
    </div>
</div>