我使用 Boostrap 5 并擁有這 4 個盒子，它們不是卡片。我怎樣才能讓它們處于相同的高度？內容是動態的。
您可以在這里找到 Codepen： https ://codepen.io/Deluxe23/pen/gOXJWwG
下面是只有 2 個框的 HTML 代碼。我不能全部發布，因為這篇文章的代碼太多了。您將在 Codepen 中看到所有 4 個框。
.box>.icon {
text-align: center;
position: relative;
}
.box>.icon>.image {
position: relative;
z-index: 2;
margin: auto;
width: 88px;
height: 88px;
border: 8px solid white;
line-height: 88px;
border-radius: 50%;
background: blue;
vertical-align: middle;
}
.box>.icon:hover>.image {
background: #333;
}
.box>.icon>.image>i {
font-size: 36px !important;
color: #fff !important;
}
.box>.icon:hover>.image>i {
color: white !important;
}
.box>.icon>.info {
margin-top: -24px;
background: rgba(0, 0, 0, 0.04);
border: 1px solid #e0e0e0;
padding: 40px 0 10px 0;
}
.box>.icon:hover>.info {
background: rgba(0, 0, 0, 0.04);
border-color: #e0e0e0;
color: white;
}
.box>.icon>.info>h3.title {
font-family: "Montserrat", sans-serif !important;
font-size: 1.25rem;
color: #222;
font-weight: 500;
}
.box>.icon>.info>p {
font-family: "Montserrat", sans-serif !important;
font-size: 16px;
color: #666;
line-height: 1.5em;
margin: 20px;
}
.box>.icon:hover>.info>h3.title,
.box>.icon:hover>.info>p,
.box>.icon:hover>.info>.more>a {
color: #222;
}
.box>.icon>.info>.more a {
font-family: "Montserrat", sans-serif !important;
font-size: 12px;
color: #222;
line-height: 12px;
text-transform: uppercase;
text-decoration: none;
}
.box>.icon:hover>.info>.more>a {
color: #fff;
padding: 6px 8px;
background-color: blue;
}
.box .space {
height: 30px;
}<section style="background-color:#f7f7f7">
<div class="container">
<div class="row pt-mb-5 pt-lg-5 pb-mb-5 pb-lg-5">
<div class="col-6 col-sm-6 col-lg-3">
<div class="box ">
<div class="icon ">
<div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQAAAABYmaj5AAAAAnRSTlMAAHaTzTgAAAATSURBVBgZYxgFo2AUjIJRQFcAAAV4AAHcRQIbAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async"
class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
<div class="info">
<h3 class="title">BoxHeadline 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. massa luctus ornare. Suspendisse
blandit quam elit, eu imperdiet neque semper</p>
<div class="more">
<a href="/kontakt/" title="Title Link">
Mehr Informationen<i class="fa fa-angle-double-right"></i>
</a>
</div>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3">
<div class="box ">
<div class="icon ">
<div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLAQAAAAAQNUdHAAAAAnRSTlMAAHaTzTgAAAAQSURBVCjPY2AYBaNgFJAMAAM5AAELGjlgAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async"
class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
<div class="info">
<h3 class="title">BoxHeadline 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p>
</div>
</div>
<div class="space"></div>
</div>
</div>
</div>
</div>
</section>uj5u.com熱心網友回復：
我稍微更改了您的標記，并更改了仍然保持設計但使高度正常作業所需的唯一 CSS，因此如果我錯過了一種樣式，例如字體裝飾，您將不得不重新添加它。基本上我所做的是將背景和邊框顏色放在box而不是info因為該框是所有子項（包括info）的包含 div，因此具有這些樣式是有意義的。
其次，因為當您水平調整列的大小時，您的列沒有設定斷點的最小寬度以使它們進入新行，因此您應該將所有的最小高度設定為box最大渲染高度。在您的情況下，它是帶有長p文本的框 #3。
在較低的瀏覽器寬度處查看文本的全高，因為所有其他框都具有相同的最小高度，它們將始終匹配。
看到它在這里作業：
.icon {
text-align: center;
position: relative;
background: rgba(0, 0, 0, 0.04);
border: 1px solid #e0e0e0;
margin-top: -24px;
padding: 40px 0 0 0;
min-height: 100%;
}
.col-6>.image {
position: relative;
z-index: 2;
margin: auto;
width: 88px;
height: 88px;
border: 8px solid white;
line-height: 88px;
border-radius: 50%;
background: blue;
vertical-align: middle;
}
.col-6:hover>.image {
background: #333;
}
.info {
min-height: inherit;
}
.box {
height: 100%;
}
section {
height: 100vh;
}
.image>i {
font-size: 36px !important;
color: #fff !important;
}
.col-6:hover>.image>i {
color: white !important;
}
.box>.icon:hover>.info {
background: rgba(0, 0, 0, 0.04);
border-color: #e0e0e0;
color: white;
}
.box>.icon>.info>h3.title {
font-family: "Montserrat", sans-serif !important;
font-size: 1.25rem;
color: #222;
font-weight: 500;
}
.info>p {
font-family: "Montserrat", sans-serif !important;
font-size: 16px;
color: #666;
line-height: 1.5em;
margin: 10px;
}
.icon:hover>.info>h3.title,
.icon:hover>.info>p,
.icon:hover>.info>.more>a {
color: #222;
}
.box>.info>.more a {
font-family: "Montserrat", sans-serif !important;
font-size: 12px;
color: #222;
line-height: 12px;
text-transform: uppercase;
text-decoration: none;
}
.icon:hover .info .more>a {
color: #fff;
padding: 6px 8px;
background-color: blue;
}
.box .space {
height: 30px;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
<section style="background-color:#f7f7f7">
<div class="container">
<div class="row pt-mb-5 pt-lg-5 pb-mb-5 pb-lg-5">
<div class="col-6 col-sm-6 col-lg-3 mb-2">
<div class="image" style="line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQAAAABYmaj5AAAAAnRSTlMAAHaTzTgAAAATSURBVBgZYxgFo2AUjIJRQFcAAAV4AAHcRQIbAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async"
class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
<div class="icon ">
<div class="box">
<div class="info">
<h3 class="title">BoxHeadline 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. massa luctus ornare. Suspendisse
blandit quam elit, eu imperdiet neque semper</p>
<div class="more">
<a href="/kontakt/" title="Title Link">
Mehr Informationen<i class="fa fa-angle-double-right"></i>
</a>
</div>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3 mb-2">
<div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLAQAAAAAQNUdHAAAAAnRSTlMAAHaTzTgAAAAQSURBVCjPY2AYBaNgFJAMAAM5AAELGjlgAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async"
class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
<div class="icon ">
<div class="box">
<div class="info">
<h3 class="title">BoxHeadline 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3 mb-2">
<div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLAQAAAAAQNUdHAAAAAnRSTlMAAHaTzTgAAAAQSURBVCjPY2AYBaNgFJAMAAM5AAELGjlgAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async"
class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
<div class="icon ">
<div class="box ">
<div class="info">
<h3 class="title">BoxHeadline 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. ultrices gravida massa luctus
ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3 mb-2">
<div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQAAAABYmaj5AAAAAnRSTlMAAHaTzTgAAAATSURBVBgZYxgFo2AUjIJRQFcAAAV4AAHcRQIbAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async"
class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
<div class="icon ">
<div class="box ">
<div class="info">
<h3 class="title">BoxHeadline 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p>
</div>
</div>
<div class="space"></div>
</div>
</div>
</div>
</div>
</section>uj5u.com熱心網友回復：
添加類喜歡
<div class="col-6 col-sm-6 col-lg-3">
<div class="box h-100"> /* Add Class Here*/
<div class="icon h-100 d-flex flex-column"> /* Add Class Here*/
<div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:/EcctII.webp" decoding="async" class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
<div class="info flex-fill"> /* Add Class Here*/
<h3 class="title">BoxHeadline 4</h3>
uj5u.com熱心網友回復：
請通過此代碼更新。我們使用height : 100%
.box > .icon { text-align: center; position: relative; }
.box > .icon > .image { position: relative; z-index: 2; margin: auto; width: 88px; height: 88px; border: 8px solid white; line-height: 88px; border-radius: 50%; background: blue; vertical-align: middle; }
.box > .icon:hover > .image { background: #333; }
.box > .icon > .image > i { font-size: 36px !important; color: #fff !important; }
.box > .icon:hover > .image > i { color: white !important; }
.box > .icon > .info { margin-top: -24px; padding: 40px 0 10px 0; }
.box > .icon:hover > .info { border-color: #e0e0e0; color: white; }
.box > .icon > .info > h3.title { font-family: "Montserrat",sans-serif !important; font-size: 1.25rem; color: #222; font-weight: 500; }
.box > .icon > .info > p { font-family: "Montserrat",sans-serif !important; font-size: 16px; color: #666; line-height: 1.5em; margin: 20px;}
.box > .icon:hover > .info > h3.title, .box > .icon:hover > .info > p, .box > .icon:hover > .info > .more > a { color: #222; }
.box > .icon > .info > .more a { font-family: "Montserrat",sans-serif !important; font-size: 12px; color: #222; line-height: 12px; text-transform: uppercase; text-decoration: none; }
.box > .icon:hover > .info > .more > a { color: #fff; padding: 6px 8px; background-color: blue; }
.box .space { height: 30px; }
.box {
position: relative;
height: 100%;
background: #ddd;
}
.box:hover{background: rgba(0, 0, 0, 0.04); }
.col-6{ margin-bottom:20px;}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
<section style="background-color:#f7f7f7">
<div class="container">
<div class="row pt-mb-5 pt-lg-5 pb-mb-5 pb-lg-5">
<div class="col-6 col-sm-6 col-lg-3">
<div class="box ">
<div class="icon ">
<div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQAAAABYmaj5AAAAAnRSTlMAAHaTzTgAAAATSURBVBgZYxgFo2AUjIJRQFcAAAV4AAHcRQIbAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async" class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
<div class="info">
<h3 class="title">BoxHeadline 1</h3>
<p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper</p>
</p>
<div class="more">
<a href="/kontakt/" title="Title Link">
Mehr Informationen<i class="fa fa-angle-double-right"></i>
</a>
</div>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3">
<div class="box ">
<div class="icon ">
<div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLAQAAAAAQNUdHAAAAAnRSTlMAAHaTzTgAAAAQSURBVCjPY2AYBaNgFJAMAAM5AAELGjlgAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async" class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
<div class="info">
<h3 class="title">BoxHeadline 2</h3>
<p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p>
</p>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3">
<div class="box ">
<div class="icon ">
<div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLAQAAAAAQNUdHAAAAAnRSTlMAAHaTzTgAAAAQSURBVCjPY2AYBaNgFJAMAAM5AAELGjlgAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async" class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
<div class="info">
<h3 class="title">BoxHeadline 3</h3>
<p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p>
</p>
</div>
</div>
<div class="space"></div>
</div>
</div>
<div class="col-6 col-sm-6 col-lg-3">
<div class="box ">
<div class="icon ">
<div class="image" style="padding-top:14px;line-height:0px;padding-left:2px"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQAAAABYmaj5AAAAAnRSTlMAAHaTzTgAAAATSURBVBgZYxgFo2AUjIJRQFcAAAV4AAHcRQIbAAAAAElFTkSuQmCC" style="max-width:45px;max-height:45px" data-src="https://iili.io/EcctII.webp" decoding="async" class="lazyload"><noscript><img src="https://iili.io/EcctII.webp" style="max-width:45px;max-height:45px" data-eio="l"></noscript></div>
<div class="info">
<h3 class="title">BoxHeadline 4</h3>
<p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper. </p>
</p>
</div>
</div>
<div class="space"></div>
</div>
</div>
</div>
</div>
</section>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/445231.html