Bootstrap4 : CardDeck + Card : 如何获得相同的高度？

问题描述 投票：0回答：1

我试着按照这个问题的问题+答案来回答。Bootstrap4让卡头高度相同。但我不能让它工作。

我的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>

而这个目前显示为：enter image description here

更新

当我在第二张卡中的文字有较少的字符时，答案中的代码仍然渲染不正确。enter image description here

bootstrap-4 header height carddeck card
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>

我希望这对你有好处。

谢谢你的支持...

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.