代码之家 › 专栏 › 技术社区 › Nina

反应:使所有行的高度相同

react-bootstrap row reactjs css

Nina · 技术社区 · 2 年前

我已经设法使一行中的所有列具有相同的高度,但是,我不知道如何对行执行此操作(请参阅下面的屏幕截图和代码)。我希望在移动视图中,当一行中只有一张卡时,所有行的高度都相同。

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

这里所有的行都不同:

此处,同一行中的列具有相同的高度:

0 回复 | 直到 2 年前

Rok Benko 2 年前

添加以下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
  }
}

请参阅 live demo 。

应用程序.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;
  }
}

Mnai 2 年前

您可以将每一行(col-sm-6 col-lg-3 d-flex)设置为flex容器,然后应用align items:stretch,这是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>