在 Bootstrap 中垂直对齐项目面临问题答案

【问题标题】：facing issue vertically Aligning items in Bootstrap在 Bootstrap 中垂直对齐项目面临问题
【发布时间】：2023-01-29 20:10:14
【问题描述】：

我想在不提及高度的情况下为所有网格提供相同的行线。所以，我使用了 align-item-stretch 但箭头按钮没有调整。

如何将箭头对齐到相同的高度？

Here my code

Here are the image

 <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，这个我要搞清楚。

【问题讨论】：

我不太清楚你想做什么。你想让箭头对齐在相同的高度吗？例如，在 Account / Account-test / ABC-test3 块的中间？
是的，我想将箭头对齐到相同的高度

标签： javascript reactjs bootstrap-5

【解决方案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到它（再次，等于箭头宽度 + 一些像素）。

【讨论】：