bootstrap-4 - 容器超出 jumbotron
问题描述
当我创建基于jumbotron
. 超过某个高度container
(我元素中的主视图),从 开始jumbotron
,我不知道我做错了什么。不包括 Bootstrap,我正在使用nk-o/jarallax。
HTML:
<div class="jumbotron footer--jumbotron rounded-0">
<div class="jarallax" style="background-image: url('/assets/newsletter.jpg');">
<div class="container">
<div class="row text-center">
<div class="col-lg-6 col-left-align slogan">
<h2 class="slogan">Slogan</h2>
</div>
<div class="col-lg-6 col-right-align">
<div class="card newsletter bg-light rounded-0">
<div class="card-body">
<h4 class="card-title">Title</h4>
<div class="newsletter-pane">
<form>
<div class="form-group">
<input type="text" id="newsletterName" class="form-control rounded-0" placeholder="Twoje imię" required>
<input type="email" id="newsletterEmail" class="form-control rounded-0" placeholder="Adres e-mail" required>
</div>
<button type="submit" class="btn bg-red rounded-0">Send</button>
</form>
</div>
<p class="card-description">Some text</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
用于jumbotron
:
.jumbotron {
background-color: #db1a1a;
}
.jumbotron.footer--jumbotron,
.jumbotron .footer--jumbotron {
height: 70vh;
margin-bottom: 0;
}
@media (max-width: 1199.98px) {
.jumbotron {
padding: 0 !important;
}
}
@media (min-width: 1200px) {
.jumbotron {
padding: 1rem 1rem;
}
}
.jarallax {
position: relative;
z-index: 0;
}
.jarallax .jarallax-img {
position: absolute;
object-fit: cover;
font-family: 'object-fit: cover;';
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.jumbotron.jarallax,
.jumbotron .jarallax {
height: 100%;
}
.jumbotron.jarallax .container,
.jumbotron .jarallax .container {
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
@media (min-width: 1200px) {
.jarallax .col-lg-6.col-left-align {
text-align: left;
}
.jarallax .col-lg-6.col-right-align {
text-align: right;
}
}
@media (max-width: 1199.98px) {
.jarallax .col-lg-6.col-left-align {
text-align: center;
}
.jarallax .col-lg-6.col-right-align {
text-align: center;
}
}
@media (max-width: 991.98px) {
.jarallax .col-lg-6 {
margin-left: 2rem;
margin-right: 2rem;
}
.jarallax .col-lg-6 + .col-lg-6 {
padding-top: 2rem;
padding-right: 2rem;
}
}
@media (min-width: 992px) {
.jarallax .col-lg-6 {
padding-left: 2rem;
padding-right: 2rem;
}
}
非常感谢您的帮助。:)
解决方案
我试图在 codepen中复制您的问题。
jumbotron 容器的高度是固定的(70vh),而子元素(如表单)也是固定的,因此在某些时候会溢出。
.jumbotron.footer--jumbotron,
.jumbotron .footer--jumbotron {
height: 70vh;
margin-bottom: 0;
}
快速解决方法是将父容器变成一个display: flex;
然后给 jumbotronflex: 8
和页脚flex:2
(甚至更好地使用grid
)
<div class="container">
<div class="jumbotron"></div>
<footer></footer>
</div>
body {
height: 100vh;
display: flex;
flex-direction: column;
}
.footer {
flex: 2;
widht: 100%;
}
.jumbotron {
background-color: #db1a1a;
推荐阅读
- c# - 如何比较当前生成的 excel 和以前生成的 excel 以删除 excel 互操作中的所有匹配行?
- javascript - 使用 Google App Script 在 Telegram BOT API 中获取“错误请求:请求中没有照片”
- neural-network - resNet conv1和传统conv2d层的区别
- node.js - 如何将对象添加到作为对象内键值的数组中?
- python - 一个简单的方法来选择一个或多个位组成一个词
- spring-boot - JMS 在不阻塞 onMessage() 的情况下配置退避/重试
- javascript - (Discord.js)TypeError:无法读取未定义的属性“添加”
- dataframe - Julia中的Impute(处理缺失值方法)不支持数据框列的不同数据类型
- javascript - Javascript - 未捕获的错误:语法错误,无法识别的表达式
- c# - Woocommerce 更新客户密码