html - 嵌套列高度问题 Bootstrap 5
问题描述
我的嵌套列的高度有问题。我希望列在大屏幕和小屏幕上的高度相同。但目前该尺寸在最大和最小视口处是完美的，但在中等视口处则不是。请参阅 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 材料，并试图解决这个问题好几天没有效果，所以我想这里有人可能有答案！
解决方案
在 Bootstrap 中，列通常具有相同的高度，但在您的右侧列中，您有一行，除非您告诉它不同（添加h-100），否则它只会扩展到其子项的高度。
添加h-100到行将使两col-12列平等地填充列空间。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<style>
html,
body {
height: 100%;
}
body {
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
/* change the background color */
.navbar-custom {
background-color: rgba(255, 255, 255, 0.1);
}
/* CSS only for examples not required for centering */
.container {
height: 100%;
}
p {
font-size: 16px;
}
.col1 {
background-color: #82d4f5;
margin-left: 15px;
margin-right: 15px;
}
.col3 {
background-color: #edc324;
margin-bottom: 15px;
}
.col4 {
background-color: #8e7cc3;
}
</style>
<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 h-100">
<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-->如果您希望视频有自己的空间和视频正下方的表单，您可以将行 flex 方向设置为列，并使用 flex-grow 扩展表单列以填充空间。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<style>
html,
body {
height: 100%;
}
body {
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
/* change the background color */
.navbar-custom {
background-color: rgba(255, 255, 255, 0.1);
}
/* CSS only for examples not required for centering */
.container {
height: 100%;
}
p {
font-size: 16px;
}
.col1 {
background-color: #82d4f5;
margin-left: 15px;
margin-right: 15px;
}
.col3 {
background-color: #edc324;
margin-bottom: 15px;
}
.col4 {
background-color: #8e7cc3;
}
</style>
<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 h-100 flex-column">
<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 flex-grow-1">
<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-->推荐阅读
- sql - 从 2 个 SELECT 中获得差异
- android - D/BluetoothLeScanner：每隔几秒自动停止扫描
- machine-learning - PCA 与平均列
- python - 在循环 python/numpy 中扩展数组
- php - sql group by user HAVING time ASC ORDER BY time DESC
- javascript - 是否可以从另一个嵌套箭头函数访问箭头函数的参数？
- jsf - 如何修复 JSF 请求范围的 CDI Bean
- javascript - 如果字符串javascript的最后一个字符，我该如何摆脱？
- webpack - Webpack 公共路径
- dart - 如果表达式为假，标准函数抛出异常？