调整卡片布局：将编辑/删除按钮置于卡片右侧并与图片及名称同行

需要将**编辑（Edit）和删除（Delete）**按钮与图片、场所名称（premise name）放在同一行，按钮位于卡片右侧，且尺寸与卡片匹配。

当前布局效果：

期望布局效果：

现有代码 #

CSS 代码 #

.card-content {
  display: flex;
  align-items: center;
  position: relative;
}

HTML 代码 #

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">


<!-- Body -->
<div class="px-md-5 px-4">
  <a class="anchor-fake" onclick="MovingIn()">
    <div class="block block--light block--cardShadow mb-md-4 mb-2">
      <div class="card-content">
        <div class="mr-3">
          <img src="~/assets/img/hmo-connectmyhome-home-icon.svg" />
        </div>
        <div class="card-text-20-14-400">
          @premise.PremiseNickname
        </div>
      </div>
      <div class="btn-group">
        <input class="btn btn-secondary btn-lg" type="button" value="Edit">
        <input class="btn btn-danger btn-lg" type="button" value="Delete">
      </div>
    </div>
  </a>
</div>

解决方案 #

修改后的完整代码 #

CSS 补充样式

/* 适配按钮高度，调整卡片内边距 */
.block {
  padding: 0.75rem 1rem;
}

HTML 核心调整

<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">


<!-- Body -->
<div class="px-md-5 px-4">
  <a class="anchor-fake" onclick="MovingIn()">
    <div class="block block--light block--cardShadow mb-md-4 mb-2 d-flex align-items-center justify-content-between">
      <div class="card-content d-flex align-items-center">
        <div class="mr-3">
          <img src="~/assets/img/hmo-connectmyhome-home-icon.svg" />
        </div>
        <div class="card-text-20-14-400">
          @premise.PremiseNickname
        </div>
      </div>
      <div class="btn-group">
        <input class="btn btn-secondary" type="button" value="Edit">
        <input class="btn btn-danger" type="button" value="Delete">
      </div>
    </div>
  </a>
</div>

关键调整说明 #

1. 给卡片容器.block添加Bootstrap内置类：
   • d-flex将容器设为弹性布局，实现内容与按钮同行
   • align-items-center确保所有元素垂直居中对齐
   • justify-content-between自动将按钮推至卡片最右侧
2. 移除按钮的btn-lg类，避免按钮高度超出卡片范围，让尺寸与卡片匹配
3. 保留.card-content的d-flex align-items-center，保证图片与场所名称垂直居中

内容的提问来源于stack exchange，提问作者Suraya Zulkifli