0

我试图按照这个问题的问题+答案：Bootstrap4 make card headers the same height，但是我无法让它工作。

我的html代码是这样的：

<div class="card-deck">
   <div class="card m-xs-1 m-2" style="">
      <div class="card-header" style="">
         <div class="card-text text-left" style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat viverra odio pharetra lacinia.
         </div>
      </div>
      <div class="card-body" style="">
         <div class="card-text text-left" style="">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat viverra odio pharetra lacinia. Vestibulum mattis eros velit, hendrerit malesuada est hendrerit eget. Pellentesque urna quam, eleifend ut accumsan vel, feugiat et arcu. Curabitur consectetur tincidunt arcu, id sollicitudin erat egestas non
         </div>
         <div class="card-text text-left" style="">
            <br>
         </div>
      </div>
      <div class="card-footer" style="">
         <div class="card-text text-muted text-left" style="">
            <small>text</small>
         </div>
      </div>
   </div>
   <div class="card m-xs-1 m-2" style="">
      <div class="card-header" style="">
         <div class="card-text text-left" style="">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat viverra odio pharetra lacinia. Vestibulum mattis eros velit, hendrerit malesuada est hendrerit eget. Pellentesque urna quam, eleifend ut accumsan vel, feugiat et arcu. Curabitur consectetur tincidunt arcu, id sollicitudin erat egestas non
         </div>
      </div>
      <div class="card-body" style="">
         <div class="card-text text-left" style="">
            Lorem ipsum dolor sit amet
         </div>
         <div class="card-text text-left" style="">
            <br>
         </div>
      </div>
      <div class="card-footer" style="">
         <div class="card-text text-muted text-left" style="">
            <small>text2</small>
         </div>
      </div>
   </div>
</div>

这目前呈现为： 在此处输入图像描述

更新

当我第二张卡片中的文本字符较少时，答案中的代码仍然不正确： 在此处输入图像描述

4

1 回答 1

0

根据您的要求使用以下代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="card-deck">
   <div class="card m-xs-1 m-2" style="">
      <div class="card-header d-flex align-items-center h-100" style="">
         <div class="card-text text-left" style="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat viverra odio pharetra lacinia.
         </div>
      </div>
      <div class="card-body d-flex align-items-center h-100" style="">
         <div class="card-text text-left" style="">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat viverra odio pharetra lacinia. Vestibulum mattis eros velit, hendrerit malesuada est hendrerit eget. Pellentesque urna quam, eleifend ut accumsan vel, feugiat et arcu. Curabitur consectetur tincidunt arcu, id sollicitudin erat egestas non
         </div>
         <div class="card-text text-left" style="">
            <br>
         </div>
       </div>
      <div class="card-footer" style="">
         <div class="card-text text-muted text-left" style="">
            <small>text</small>
         </div>
      </div>
   </div>
   <div class="card m-xs-1 m-2" style="">
      <div class="card-header d-flex align-items-center h-100" style="">
         <div class="card-text text-left" style="">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat viverra odio pharetra lacinia. Vestibulum mattis eros velit, hendrerit malesuada est hendrerit eget. Pellentesque urna quam, eleifend ut accumsan vel, feugiat et arcu. Curabitur consectetur tincidunt arcu, id sollicitudin erat egestas non
         </div>
      </div>
      <div class="card-body d-flex align-items-center h-100" style="">
         <div class="card-text text-left" style="">
            Lorem ipsum dolor sit amet.
         </div>
         <div class="card-text text-left" style="">
            <br>
         </div>
      </div>
      <div class="card-footer" style="">
         <div class="card-text text-muted text-left" style="">
            <small>text2</small>
         </div>
      </div>
   </div>
</div>
</body>
</html>

于 2020-06-13T08:58:52.813 回答