【发布时间】：2021-06-18 09:12:26
【问题描述】：
我的嵌套列的高度有问题。 我希望列在大屏幕和小屏幕上的高度相同。但目前该尺寸在最大和最小视口处是完美的，但在中等视口处则不是。 请参阅 codepen 中的示例： 我希望列的行为示例：https://codepen.io/marawa/pen/rNyRLyZ
他们目前的行为示例（检查示例的响应性）：https://codepen.io/marawa/pen/xxqBOde [
<div class="container-fluid">
<div class="row rad1 justify-content-center">
<div class="col-md-5 col1">
<h2 class="text-center">Vasketips</h2></br>
<p>Diamondcare er en keramisk coating. Det vil si en type flytende glass som legges på lakken. For å få full effekt krever denne en viss herdetid. Full herdetid regnes å være 72 timer fra tidspunktet for påføring. For at både du og bilen skal ha mest mulig nytte og effekt av Diamondcare Keramisk Lakkbeskyttelse kommer vi med noen vasketips:</p>
</br>
<ul class="fa-ul">
<li><i class="fa-li far fa-gem fa-lg"></i>Etter den første uken står du fritt til å vaske bilen på vanlig måte. Vi anbefaler bilrelaterte vaskeprodukter – ikke Zalo eller parafin/diesel. Før såpevask kan du trygt bruke petrokjemisk avfetting til å fjerne den plagsomme trafikkfilmen som oppstår (spesielt på vinterhalvåret).</li>
</br>
<li><i class="fa-li far fa-gem fa-lg"></i>Vi kommer gjerne med anbefalinger av vaskeprodukter. Dersom du setter bort vasken til andre bør du informere om at du har lakkbeskyttelse på bilen. </li>
</br>
<li><i class="fa-li far fa-gem fa-lg"></i>Ved å benytte Diamondcare Refresher på bilen ca. hver 4-6 mnd. Vil dette gjøre at lakken oppfører seg som da bilen var ny-behandlet. Garantien opprettholdes selv uten bruk av dette produktet. </li>
</br>
<li><i class="fa-li far fa-gem fa-lg"></i>Tørk bilen for å holde den lenger ren. Vi anbefaler at du bruker det medfølgende blå mikrofiber-tørkehåndkleet etter at bilen er ferdig vasker og spylt over. Fukt- og vri det opp før du begynner å tørke. Da tiltrekker det seg mest mulig. </li>
</br>
<li><i class="fa-li far fa-gem fa-lg"></i>Rebehandling er ikke nødvendig for å opprettholde garantien, men det kan utføres om ønskelig. Ta kontakt med din forhandler for nærmere informasjon om dette. </li>
</ul>
</div>
<div class="col-md-5 col2">
<div class="row rad2 justify-content-center">
<div class="col-12 col3">
<div class="ratio ratio-16x9">
<iframe
src="https://www.youtube.com/watch?fbclid=IwAR2KcXLf_v8knVxaJzKdD7WpLzJGrdrqd1pG_kbzB5arEKpRkKPSNvTh9h4&v=HVp1321oon8&feature=youtu.be"
allowfullscreen
></iframe>
</div>
</div><!--end of col3-->
<div class="col-12 col4">
<h4>Har du spørsmål?</h4>
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">E-post</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Din e-post">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label" placeholder="Skriv ditt spørsmål her...">Spørsmål</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="mb-3">
<input class="btn btn-custom" type="submit" value="Submit">
</div>
</div><!--end of col4-->
</div><!--end of rad2-->
</div><!--end of col2-->
</div><!--end of rad1-->
</div><!--end of container-fluid-->
我需要列在所有视口中的高度相同，直到它为较小的视口折叠。如果无法做到这一点，那么当它从全尺寸变为中等尺寸时，我需要它直接从全尺寸变为折叠。
我怀疑高度差异的原因是因为我添加的视频和表单有自己的引导代码用于放置、边距、填充等？无论如何，我已经阅读了可用的 Bootstrap 5 材料，并试图解决这个问题好几天都没有效果，所以认为这里有人可能有答案！
【问题讨论】：
标签： html css responsive-design nested bootstrap-5