时间戳

首页 > 解决方案 > Bootstrap Cards - 第三张卡片不高于同一行中的其他 2 张卡片

css - Bootstrap Cards - 第三张卡片不高于同一行中的其他 2 张卡片

问题描述

我正在尝试获取一排 3 张卡片，该行根据其内容扩展到卡片 #1 或卡片 #2 的最大高度，第三张卡片也获得相同的最大高度但溢出-y：即使内容长于卡片 1 和 2，也可以滚动。

我可以将前两张卡延伸到其中最高的一张，但似乎无法将第三张卡限制在这个高度。

编辑：用JS解决> https://codepen.io/chrisj75/pen/jOmbEEQ

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

<title>Hello, world!</title>  <body>
<div class='container'>
  <input type='button' value='Fix Height' onclick='fixHeight();' />
  <div class='row'>
  <div class='card-group col-md-12'>
    <div class='card col-md-4'>
    <div id='card1'>
      Card #1
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id mollis tellus. Proin faucibus mauris non felis placerat, non posuere nibh tristique. Quisque elementum quam urna, tempus iaculis augue convallis ullamcorper. Proin ac laoreet augue. Morbi quis ipsum turpis. Nullam finibus blandit sem, fringilla semper diam tincidunt quis. Nam venenatis dictum eleifend. Donec rutrum non lectus et lobortis. Donec congue, nunc eget consectetur tempus, massa arcu ornare eros, ac scelerisque mauris velit ut libero.


    </div>
    </div>
    <div class='card'>
      <div id='card2'>
      Card #2
      Aliquam in nibh cursus, molestie erat in, congue eros. In volutpat vel orci in tempor. Duis quis sodales leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus sapien pharetra, imperdiet tellus et, facilisis nisl. Cras erat quam, hendrerit in aliquet at, bibendum at turpis. Cras sodales pellentesque mauris sit amet venenxatis. Proin ac nisl viverra, ornare sapien eget, condimentum velit. Nam iaculis ex sed sapien ultricies, vitae sollicitudin leo sagittis. Praesent ante tortor, auctor quis mauris sed, rhoncus elementum dolor. Curabitur sollicitudin non mi vitae ultricies. Vestibulum justo lacus, hendrerit eget mattis quis, maximus id purus.
    </div>
    </div>
    <div class='card col-md-4'>
      <div id='card3'>
      Card #3
      Aliquam in nibh cursus, molestie erat in, congue eros. In volutpat vel orci in tempor. Duis quis sodales leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus sapien pharetra, imperdiet tellus et, facilisis nisl. Cras erat quam, hendrerit in aliquet at, bibendum at turpis. Cras sodales pellentesque mauris sit amet venenatis. Proin ac nisl viverra, ornare sapien eget, condimentum velit. Nam iaculis ex sed sapien ultricies, vitae sollicitudin leo sagittis. Praesent ante tortor, auctor quis mauris sed, rhoncus elementum dolor. Curabitur sollicitudin non mi vitae ultricies. Vestibulum justo lacus, hendrerit eget mattis quis, maximus id purus.
                Aliquam in nibh cursus, molestie erat in, congue eros. In volutpat vel orci in tempor. Duis quis sodales leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus sapien pharetra, imperdiet tellus et, facilisis nisl. Cras erat quam, hendrerit in aliquet at, bibendum at turpis. Cras sodales pellentesque mauris sit amet venenatis. Proin ac nisl viverra, ornare sapien eget, condimentum velit. Nam iaculis ex sed sapien ultricies, vitae sollicitudin leo sagittis. Praesent ante tortor, auctor quis mauris sed, rhoncus elementum dolor. Curabitur sollicitudin non mi vitae ultricies. Vestibulum justo lacus, hendrerit eget mattis quis, maximus id purus.
                Aliquam in nibh cursus, molestie erat in, congue eros. In volutpat vel orci in tempor. Duis quis sodales leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tempus sapien pharetra, imperdiet tellus et, facilisis nisl. Cras erat quam, hendrerit in aliquet at, bibendum at turpis. Cras sodales pellentesque mauris sit amet venenatis. Proin ac nisl viverra, ornare sapien eget, condimentum velit. Nam iaculis ex sed sapien ultricies, vitae sollicitudin leo sagittis. Praesent ante tortor, auctor quis mauris sed, rhoncus elementum dolor. Curabitur sollicitudin non mi vitae ultricies. Vestibulum justo lacus, hendrerit eget mattis quis, maximus id purus.
    </div>
    
  </div>
</div>
</div>

CSS

#card1, #card2, #card3 {padding:2rem;}
#card3 {overflow-y:scroll;}
.hidden {display:none !important;}

JS

function fixHeight() {
  $('#card3').addClass('hidden');

  var card1 = $('#card1').height() ;
  var card2 = $('#card2').height() ;

  h = Math.max(card1,card2) ;
  //window.alert(h);
  $('#card3').height(h).removeClass('hidden')
}

标签： cssbootstrap-4

解决方案

推荐阅读