在我的应用程序中,有一个登录页面,其中包含一个包含登录表单的自定义 Bootstrap 。看起来像这样
代码就像
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<div class="animated fadeInDown">
<div class="well no-padding">
<!-- Content Of Login Form -->
</div>
</div>
</div>
<div class="col-lg-4"></div>
</div>
现在,我必须把它放在页面的中央。水平和垂直。所以我删除了 和所有 Bootstrap 列网格。将井放入具有 display flex 属性的自定义容器中。
<div class="login-container">
<div class="animated fadeInDown">
<div class="well no-padding">
<!-- Content Of Login Form -->
</div>
</div>
</div>
.login-container 的 CSS
.login-container {
position: fixed;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
现在,登录表单看起来像这样
如何获得与我之前在井的 Bootstrap col-lg-4
网格中相同的响应宽度。我试图在容器内提供网格,但这对我不起作用。我想要这样的登录表单,没有硬编码宽度,像这样。
我只是为了问题的目的,通过硬编码井的宽度来完成这一点。
最佳答案
属性 position: fixed 不考虑父框的宽度,如果你想让它占据整个宽度,所以一种解决方案是使用 jQuery 代码计算父框的宽度并将其应用于子框盒子。这是一个例子:
let parentWidth = parseInt($('.col-sm-4.login-container').css('width'));
let parentPadding = parseInt($('.col-sm-4.login-container').css('padding').split(' ')[1]) * 2;
let childWidth = parentWidth - parentPadding;
$('.login').css('width', childWidth);
.container {
background: black;
}
.col-sm-4 {
background: #eee;
height: 100vh;
}
.login-container {
display: flex;
align-items: center;
}
.login {
width: 100%;
height: 100px;
background: red;
position: fixed;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4 login-container">
<div class="login"></div>
</div>
<div class="col-sm-4"></div>
</div>
</div>
希望对你有帮助。
关于html - 在 flex div 中设置子元素的响应宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52090442/