問(wèn)題是.row有display: flex.?Flexbox 的特點(diǎn)是 Flexbox
使容器的所有子項(xiàng)占用相同數(shù)量的可用寬度/高度，無(wú)論可用的寬度/高度有多少。
因此，當(dāng)其中一個(gè)孩子長(zhǎng)大時(shí)，其余孩子也會(huì)變高。
一個(gè)可能的解決方案是在 html 結(jié)構(gòu)中添加一個(gè)級(jí)別，并將具有背景顏色的元素向下移動(dòng)，這樣它就不會(huì)成為 的子元素，因此.row將根據(jù)其內(nèi)容保持其高度。
例如：
<div class="col-lg-3"><!-- moved the background and class to a deeper level ?? -->
? <div class="immune-collapse" style="background-color:orange;">
? ? <h3 class="immune-blog-title">Immunity is not seasonal</h3>
? ? <button class="collapsible">+</button>
? ? <div class="content">
? ? ? <p>At the end of summer when that first nip is in the air, it marks the start of cold and flu season. During our
? ? ? ? lifetime we<br>
? ? ? ? experience an average of 200 colds – that’s 5 years of coughs, congestion, headaches and sore throats. 7a
? ? ? ? Children could<br>
? ? ? ? have 3-8 cold infections a year, and adults 2-4 colds annually. 8a These are caused by viral infection of the
? ? ? ? upper respiratory<br>
? ? ? ? tract.</p>
? ? </div>
? </div>
</div>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
? coll[i].addEventListener("click", function() {
? ? this.classList.toggle("active");
? ? var content = this.nextElementSibling;
? ? if (content.style.maxHeight){
? ? ? content.style.maxHeight = null;
? ? } else {
? ? ? content.style.maxHeight = content.scrollHeight + "px";
? ? }?
? });
}
.immune-blog{
? ? justify-content: center;
}
.immune-collapse{
? ? margin:15px;
? ? text-align:center;
? ? padding: 65px;
? ? background-size: cover;
? ? background-position: bottom;
? ? border-radius: 500px;
}
.immune-collapse img{
? ? max-width:250px;
? ? max-height:250px;
? ? border-radius:50%;
}
.content {
? ? ?padding: 0 18px;
? ? ?max-height: 0;
? ? ?overflow: hidden;
? ? ?transition: max-height 0.2s ease-out;
}
.collapsible{
? ? background-color: transparent;
? ? border: none;
? ? padding:10px;
? ? margin-top: 40px;
}
.immune-blog h3{
? ? font-family: 'Pangolin';
? ? color:white;
? ? font-size:35px;
}
.fa-plus-circle{
? ? color: white;
? ? background: none;
? ? font-size:50px;
}
.immune-blog .content ul{
? ? text-align:start;
? ? font-family: 'Pangolin';
? ? color:white;
}
.immune-blog .content ul li{
? ? margin:5px;
}
.immune-blog .content p{
? ? font-size:15px!important;
? ? color:White;
? ? font-family: 'Pangolin'!important;
? ? text-align:center!important;
}
<link rel="stylesheet"
? integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
? integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
? integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
? integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<div class="row">
? <div class="col-lg-3">
? ? <div class="immune-collapse" style="background-color:orange;">
? ? ? <h3 class="immune-blog-title">Immunity is not seasonal</h3>
? ? ? <button class="collapsible">+</button>
? ? ? <div class="content">
? ? ? ? <p>At the end of summer when that first nip is in the air, it marks the start of cold and flu season. During our
? ? ? ? ? lifetime we<br>
? ? ? ? ? experience an average of 200 colds – that’s 5 years of coughs, congestion, headaches and sore throats. 7a
? ? ? ? ? Children could<br>
? ? ? ? ? have 3-8 cold infections a year, and adults 2-4 colds annually. 8a These are caused by viral infection of the
? ? ? ? ? upper respiratory<br>
? ? ? ? ? tract.</p>
? ? ? </div>
? ? </div>
? </div>
? <div class="col-lg-3">
? ? <div class="immune-collapse" style="background-color:blue;">
? ? ? <h3 class="immune-blog-title">FOOD TIPS FOR PICKY
? ? ? ? EATERS</h3>
? ? ? <button class="collapsible">+</button>
? ? ? <div class="content">
? ? ? ? <p>Are you battling to get your child to eat a balanced diet? Have mealtimes become a power struggle between you
? ? ? ? ? and<br>
? ? ? ? ? your child? Try some of these tips to help a picky eater get a balanced meal.</p>
? ? ? </div>
? ? </div>
? </div>
? <div class="col-lg-3">
? ? <div class="immune-collapse" style="background-color:maroon;">
? ? ? <h3 class="immune-blog-title">WHAT CAN YOU DO
? ? ? ? TO
? ? ? ? KEEP YOUR IMMUNE SYSTEM HEALTHY?</h3>
? ? ? <button class="collapsible">+</button>
? ? ? <div class="content">
? ? ? ? <ul>
? ? ? ? ? <li>Eat plenty of fruits, vegetables, and whole grains</li>
? ? ? ? ? <li>Exercise regularly</li>
? ? ? ? ? <li>Get enough sleep</li>
? ? ? ? ? <li>Try and avoid infection, e.g. by frequent hand washing and</li>
? ? ? ? ? <li>cooking meat thoroughly</li>
? ? ? ? ? <li>Keep up with vaccinations including the flu vaccine for</li>
? ? ? ? ? <li>those at risk</li>
? ? ? ? ? <li>Maintain a healthy weight</li>
? ? ? ? ? <li>Drink alcohol in moderation</li>
? ? ? ? ? <li>Don't smoke</li>
? ? ? ? ? <li>Try to reduce your stress</li>
? ? ? ? </ul>
? ? ? </div>
? ? </div>
? </div>
</div>
