【发布时间】：2021-01-24 02:18:35
【问题描述】：
我正在使用 owl-carousel 和 bootstrap 卡片制作不同卡片的旋转表以显示在我的网页中，我遇到的唯一问题是所有卡片的高度不相等。我希望他们有一种统一的感觉，当我稍后放置更多的旋转木马时，它会更流线型，看起来更专业。下面我包含了 html、css 和 javascript 的 sn-p 以及我所看到的图像。我意识到这可能会在 CSS 中的某个地方发生，但我无法弄清楚如何让所有卡片的高度相同。在下图中，请注意在展示的卡片中，有 2 个“看起来”高度相同，但高度不同。取决于身体中的实际情况，显然是什么使高度。在早期版本的网页中，我能够实现这一点，但现在我不能
我还附上了原始代码所在的实时webpage 的副本。 请不要在实际网页的设计上使用 cmets。我正在尝试为自己制作一份现场简历。我只是附加页面，以便您可以看到代码之前的样子。以及我想要达到的外观。 在网页中，您可以看到所有卡体的高度都相同，这是我试图复制的。非常感谢任何帮助。
$(".owl-carousel").owlCarousel({
responsiveClass: true,
dots: true,
dotsContainer: false,
loop: true,
autoWidth: false,
autoplay:true,
nav:true,
smartSpeed:1000,
items:5,
responsive: {
0: {
items:1,
// margin: 150,
center: true
},
768: {
items:1,
// margin:200,
center: false
},
992: {
items:2,
// margin: 35,
center: true
},
1200: {
items:3,
// margin:250,
center: true
},
},
});/* *****************Project Cards ************************ */
.projectTitle{
color: #cdac81;
margin-top: 4rem;
text-align: center;
font-size: 3rem;
}
.card{
opacity: .90;
background-color: #00303f;
color: #cdac81;
border-style: inset;
border-color: #cdac81;
border-width: 5px;
border-radius: 1%;
}
.card-text{
text-align: left;
color: #cdac81;
}
.card-image{
align-self: center;
width: 90%;
}
.card-title, .card-body{
text-align: center;
}
.card-body{
}
.projectCarousel{
height: 62.5rem;
}
.projectCol{
width:auto;
height: auto;
}
.projectName{
font-family: serif;
font-size: 1.25rem;
}
#projectHeader{
font-family: serif;
text-align: center;
font-size: 100px;
}
.owl-carousel{
height: 62.5rem;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>projects</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous">
<!-- Bootstrap Scripts -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- Style Sheets -->
<link rel="stylesheet" href="css/styles.css">
<link href ="https://cdn.boomcdn.com/libs/owl-carousel/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container-fluid">
<nav class="navbar fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="Resume.html">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="Projects.html">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="skills.html" tabindex="-1" aria-disabled="true">skills</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container-fluid projectCarousel">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<h1 class="projectTitle">Projects</h1>
</div>
</div>
<!-- <div class="row pRow"> -->
<!-- <div class="col-lg-4 col-md-6"> -->
<div class="owl-carousel">
<!-- <div class="row"> -->
<div class="projectCol col-lg-4 col-md-6 col-sm-12">
<div class="card">
<img class="card-image"src="Images\TipCalculator.png" class="card-img-top" alt="TipCalculator">
<div class="card-body">
<h2 class="card-title">Tip Calculator</h2>
<p class = "card-title">- Completed -</p>
<ul class="card-text">
<li>The calculator takes the amount of the bill, and the amount of people splitting the bill,
applies a 15% tip and displays to the user the amount each should be paying equally.</li>
<li>Uses the tkinter kit to display a simple GUI</li>
<ul>
<li>Python</li>
</ul>
</ul>
<a href="documents\Tip_calculator.py" class="btn btn-outline-light">Take a look at the code!</a>
</div>
</div>
</div>
<div class="projectCol col-lg-4 col-md-6 col-sm-12">
<div class="card">
<img class="card-image" src="Images\TinDogPic.png" class="card-img-top" alt="TinDog">
<div class="card-body">
<h2 class="card-title">Tindog</h2>
<p class = "card-title">- Completed -</p>
<ul class="card-text">
<li>This is a project that was part of a coding bootcamp as an introductory to Web Design</li>
<li>A spoof on the Website known as <a href="https://tinder.com/">tinder</a>... but for dogs. Enjoy</li>
<li>The website is meant as a one-page construction with no actual usage but to teach basic, to intermediate
bootstrap principles and techniques.</li>
<ul>
<li>Bootstrap, HTML, CSS</li>
</ul>
</ul>
<a href="Projects/TinDog/index.html" class="btn btn-primary">Go to the Site</a>
</div>
</div>
</div>
<div class="projectCol col-lg-4 col-md-6 col-sm-12">
<div class="card">
<img class="card-image" src="Images\diceGameImage.png" class="card-img-top" alt="DiceGame">
<div class="card-body">
<h2 class="card-title">Dice Game Challenge</h2>
<p class = "card-title">- Completed -</p>
<ul class="card-text">
<li>This is a project that was part of a coding bootcamp as an introductory to Web Design</li>
<li>the website generates a random number from 1-6 for two sets of dice</li>
<li>the webiste then uses javascript to change to the appropriate image and display a winner</li>
<ul>
<li>javascript, HTML, CSS</li>
</ul>
</ul>
<a href="Projects\DiceChallenge\dicee.html" class="btn btn-primary">Go to the Site</a>
</div>
</div>
</div>
<div class="projectCol col-lg-4 col-md-6 col-sm-12">
<div class="card">
<img class="card-image" src="Images\DrumKit.png" class="card-img-top" alt="DrumKit">
<div class="card-body">
<h2 class="card-title">Drum Kit</h2>
<p class = "card-title">- Completed -</p>
<ul class="card-text">
<li>This is a project that was part of a coding bootcamp as an introductory to Web Design</li>
<li>the website teaches foundations of event listeners, and adding audio to a webpage</li>
<li>it looks for keystrokes as well as a click to interpret what sound needs to be played</li>
<ul>
<li>javascript, HTML, CSS</li>
</ul>
</ul>
<a href="Projects\Drum Kit Starting Files\index.html" class="btn btn-primary">Go to the Site</a>
</div>
</div>
</div>
<div class="projectCol col-lg-4 col-md-6 col-sm-12">
<div class="card">
<img class="card-image" src="Images\SimonSays.png" class="card-img-top" alt="DrumKit">
<div class="card-body">
<h2 class="card-title">Simon Says</h2>
<p class = "card-title">- Completed -</p>
<ul class="card-text">
<li>This is a project that was part of a coding bootcamp as an introductory to Web Design</li>
<li>the website teaches foundations of using jQuery to perform the bulk of the background work
needed to play the game.</li>
<li>The game show's simons move's and allows the user to input in sequence the same moves.
if the user inputs an incorrect move a game over event will trigger.</li>
<ul>
<li>jQuery, HTML, CSS</li>
</ul>
</ul>
<a href="Projects\Simon\index.html" class="btn btn-primary">Demo!</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha256-pTxD+DSzIwmwhOqTFN+DB+nHjO4iAsbgfyFq5K5bcE0=" crossorigin="anonymous"></script>
<script src="index.js" charset="utf-8"></script>
</body>
</html>【问题讨论】：
-
在我的浏览器（Chrome、Firefox）中运行正常，我堆叠的卡片实际大小相同。
标签： javascript html jquery css bootstrap-4