嵌套列高度问题 Bootstrap 5
Nested Columns height issue 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 代码用于放置、边距、填充等？无论如何，我已经阅读了 Bootstrap 5 material 可用的内容，并尝试了几天来解决这个问题但没有效果，所以我想这里有人可能有答案！
在 Bootstrap 中，列的高度通常相同，但在您的右侧列中，有一行只会扩展到其子项的高度，除非您将其设置为不同的高度（添加h-100).
将 h-100 添加到该行将使两个 col-12 列平均填充该列 space。
<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-->
如果您希望视频有自己的 space 和视频正下方的表格，您可以将行弹性方向设置为列，并扩展表格列以填充 space使用 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-->
我的嵌套列的高度有问题。 我希望列在大屏幕和小屏幕上的高度相等。但目前尺寸在最大和最小视口中是完美的，但在中等视口中则不然。 请参阅codepen中的示例： 我希望列的行为方式示例：https://codepen.io/marawa/pen/rNyRLyZ
<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 代码用于放置、边距、填充等？无论如何，我已经阅读了 Bootstrap 5 material 可用的内容，并尝试了几天来解决这个问题但没有效果，所以我想这里有人可能有答案！
在 Bootstrap 中，列的高度通常相同，但在您的右侧列中，有一行只会扩展到其子项的高度，除非您将其设置为不同的高度（添加h-100).
将 h-100 添加到该行将使两个 col-12 列平均填充该列 space。
<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-->
如果您希望视频有自己的 space 和视频正下方的表格，您可以将行弹性方向设置为列，并扩展表格列以填充 space使用 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-->