使用不同的值响应 json 使卡引导具有相同的高度

Question

我有一个这样的 json 响应数组

 var response2 = {
 "response": {
    "Data1": [{
      codeImage: "605313c59050dc5fc1f3372c"
      created_by: "23"
      form_name: "default"
      location: "station 1"
      image_file: "605313c59050dc5fc1f3372c123a213.png"
      image_url: "https://mysite:8241/products/view?code=605313c59050dc5fc1f3372c123a213"
      _id: "605313c59050dc5fc1f3372c",
    }],
    "Data2": [{
      codeImage: "605313fe3cdf045fbcf14be5"
      created_by: "23"
      form_name: "default"
      location: "testing testing testing testing testing"
      image_file: "605313c59050dc5fc1f3372c123a213.png"
      image_url: "https://mysite:8241/products/view?code=605313c59050dc5fc1f3372c123a213"
      _id: "605313fe3cdf045fbcf14be5",
    }]
   }}

我想使用card bootstrap 显示上面的数据。我试过用append，但问题是高度卡不一样，因为Data1和Data2中的location长度不同。

这是append 代码

for (var i = 0; i < response2.response.length; i++)
{
    var location = response2.response[i].location
    var image= response2.response[i].image_url
    var form_name = response2.response[i].form_name

    var showImage= 
     '<div class="col-sm-12 col-md-4 col-xl-4 col-padding" style="padding-right:0px; padding-left:20px; display: table; width: 100%;">'+
          '<div class="card card-custom card-stretch gutter-b card-padding">'+
              '<div class="d-flex align-items-center row">'+
                  '<div class="col">'+
                      '<div class="col-sm-12 col-md-12 col-xl-12">'+
                            '<div class="text-muted mt-1">Location</div>'+
                            '<p class="text-dark font-weight-bolder font-size-lg mt-2">'+location+'</p>'+
                      '</div>'+
                      '<div class="col-sm-12 col-md-12 col-xl-12">'+
                            '<div class="text-muted mt-1">Form</div>'+
                            '<p class="text-dark font-weight-bolder font-size-lg mt-2">'+form_name+'</p>'+
                      '</div>'+
                  '</div>'+
                  '<div class="col">'+
                      '<div class="col-sm-12 col-md-12 col-xl-12">'+
                             '<img src="'+image+'" alt="" class="image-img">'+
                      '</div>'+
                  '</div>'+
              '</div>'+
              '<div class="row justify-content-center btn-margin" style="margin-left:-25px">'+
                    '<div class="col-sm-12 col-md-4 col-xl-4">'+
                         '<button class="btn btn-xl btn-light btn-full-width" style="margin-right:10px"><i class="fas fa-print"></i> Show Data</button>'+
                     '</div>'+
                     '<div class="col-sm-12 col-md-4 col-xl-4">'+
                         '<button class="btn btn-xl btn-primary btn-full-width" style="margin-right:10px"><i class="fas fa-edit"></i> Edit</button>'+
                     '</div>'+
                     '<div class="col-sm-12 col-md-4 col-xl-4" >'+
                          '<button class="btn btn-xl btn-danger btn-full-width" style="margin-right:10px; width: 100px;"><i class="fas fa-trash-alt"></i> Delete</button>'+
                     '</div>'+
              '</div>'+
          '</div>'+
    '</div>';
    $("#imagepadding").append(showImage);
 }

这是imagepadding卡片需要显示的html

<div class="d-flex flex-column-fluid">
    <div class="container addon-padding">
        <div class="row" id="imagepadding">    
        
        </div>
    </div>
</div>
      

我曾尝试在<div class="card card-custom card-stretch gutter-b card-padding 中使用h-100 card-body，但结果相同。

你知道如何让我的card bootstrap 具有相同的高度吗？

谢谢

Answer 1

如果我理解正确，您正在寻找card-deck。当您将卡片包装在 <div class="card-deck"> 中时，这些卡片的大小会自动调整为相同的高度。

---

更新：除了.card-deck 包装器，将按钮放在.card-footer 中以对齐按钮位置。下面的演示将按钮放在<div class="card-footer bg-white border-0"> 中，以便将它们与每张卡片的底部对齐。

请注意，仅当卡片并排（在多列断点中）时，引导程序才会修复高度。在单个 col-12 布局中，bootstrap 不会调整高度，因为所有内容都在 1 列中。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

<!-- wrap .cards in .card-deck to make them the same height -->
<div class="card-deck">
  <div class="card">
    <div class="card-body">
      <p class="card-text">station 1</p>
    </div>
    <!-- put buttons in .card-footer to align across cards -->
    <div class="card-footer bg-white border-0">
      <button class="btn btn-light border">Show</button>
      <button class="btn btn-primary">Edit</button>
      <button class="btn btn-danger">Delete</button>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <p class="card-text">testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing</p>
    </div>
    <!-- put buttons in .card-footer to align across cards -->
    <div class="card-footer bg-white border-0">
      <button class="btn btn-light border">Show</button>
      <button class="btn btn-primary">Edit</button>
      <button class="btn btn-danger">Delete</button>
    </div>
  </div>
</div>