我在同一行中创建了两张 Bootstrap 卡片。两张卡片具有不同的文本元素。但是当我减小窗口大小时，两张卡片中的一张会根据内部文本元素更改其高度。我想固定两张卡片的高度，无论窗口大小是否很小……该怎么做？谁能帮我？提前致谢.... :)
#edu
{ padding: 30px 20px;
background: blue;
}<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<!--jQuery library-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Latest compiled and minified JavaScript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="edu">
<div class="row">
<div class="col-sm-6">
<div class="card" id="cardid" >
<div class="card-header"><center>Education</center></div>
<div class="card-body">
<h5 class="card-title">● hello hello hello hello hello 2019</h5>
<p class="card-text"><br>blah blah blah blah blah blah blah</p>
<h5 class="card-title"> ●hello hello hello hello helooo</h5>
<p class="card-text">something...................................................</p>
<h5 class="card-title"> ● hello hello hello hello hello</h5>
<p class="card-text">sometthing here........................</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-header"><center>Traings & Online Courses</center> </div>
<div class="card-body">
<h5 class="card-title">TRAINING</h5>
<p class="card-text">● .........................................................<br> ● ..............................................</p>
<h5 class="card-title">ONLINE COURSE 2015</h5>
<p class="card-text">● blah blah blah blah..... <br>
●blah blah blah blah blah.</p>
<h5 class="card-title">ONLINE COURSE 2015</h5>
</div>
</div>
</div>
</div>
</div>
</body>
</html>最佳答案
试试这个，它对我有用。
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<!--jQuery library-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Latest compiled and minified JavaScript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.card-body {
padding: 0 !important;
}
.card-content {
padding: 1.25rem;
}
</style>
</head>
<body>
<div class="row my-4">
<div class="col">
<div class="container-fluid">
<div class="row">
<div class="col-sm d-flex">
<div class="card card-body flex-fill">
<div class="card-header"><center>Education</center></div>
<div class="card-content">
<h5 class="card-title">● hello hello hello hello hello 2019</h5>
<p class="card-text"><br>blah blah blah blah blah blah blah</p>
<h5 class="card-title"> ●hello hello hello hello helooo</h5>
<p class="card-text">something...................................................</p>
<h5 class="card-title"> ● hello hello hello hello hello</h5>
<p class="card-text">sometthing here........................</p>
</div>
</div>
</div>
<div class="col-sm d-flex">
<div class="card card-body flex-fill">
<div class="card-header"><center>Traings & Online Courses</center></div>
<div class="card-content">
<h5 class="card-title">TRAINING</h5>
<p class="card-text">● .........................................................<br> ● ..............................................</p>
<h5 class="card-title">ONLINE COURSE 2015</h5>
<p class="card-text">● blah blah blah blah..... <br>
●blah blah blah blah blah.</p>
<h5 class="card-title">ONLINE COURSE 2015</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>关于html - 当窗口宽度不断减小时如何修复相同大小的 Bootstrap 卡？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55315479/