在 Bootstrap 中垂直對齊項目面臨問題

Question

我想在不提及高度的情況下為所有網格提供相同的行線。 所以，我使用了 align-item-stretch 但箭頭按鈕沒有調整。

如何將箭頭對齊到相同的高度？

這是我的代碼

這是圖片

 <div
    className="m-2 p-0 shadow-lg rounded-2 pe-auto border border-primary"
    style={{ width: "100%", maxWidth: "200px" }}
    key={data.key}
 >
    <a href="/">
        <div className="p-2 d-flex flex-xl-column align-items-center align-items-xl-start">
            <img
                className="mr-1"
                style={{ height: 50, width: 50 }}
                src={data.img}
                alt=""
            />
            <div>
                <h3 className="wow fadeInUp">{data.name}</h3>
                <p className="fs-6 mt-2">{data.describe}</p>
            </div>
        </div>
        <div className="d-flex justify-content-end">
            <img
            style={{width: 30,height: 30,objectFit: "contain",borderBottomRightRadius: 8}}
            src={require("./components/Images/arrow-right.png")}
            alt=""
            />
        </div>
    </a>
</div>

到底怎么調arrow，這個我要搞清楚。

Answer 1

您可以通過對 HTML 標記進行一些小的更改來實現此目的（不是絕對需要，但如果這樣做，通過 CSS 操作它們會更容易）。

首先，通過添加其他類來更改a和持有箭頭的div的呈現方式。

<a href="/" className="myLink"> <!-- add the class myLink -->
  <div className="p-2 d-flex flex-xl-column align-items-center align-items-xl-start">
    <img
      className="mr-1"
      style={{ height: 50, width: 50 }}
      src={data.img}
      alt=""
    />
    <div>
      <h3 className="wow fadeInUp">{data.name}</h3>
      <p className="fs-6 mt-2">{data.describe}</p>
    </div>
  </div>
  <div className="myArrow d-flex justify-content-end"> <!-- add the class myArrow -->
    <img
      style={{
        width: 30,
        height: 30,
        objectFit: "contain",
        borderBottomRightRadius: 8
      }}
      src={require("./components/Images/arrow-right.png")}
      alt=""
    />
  </div>
</a>

然后，將此添加到您的 CSS：

a.myLink {
  position: relative;
  display: block;
  height: 100%;
}
.myArrow {
  position: absolute;
  top: 50%;
  right: 5px;
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 50%;
}

添加了背景顏色和邊框半徑，使箭頭按鈕有些透明。

如果你不希望箭頭與下面的文本重疊，你可以增加箭頭下面內容的寬度（例如，通過箭頭寬度+一些像素，然后添加一些padding-right到它（再次，等於箭頭寬度 + 一些像素）。