【发布时间】：2020-06-08 21:58:30
【问题描述】：
我使用bootstrap 3 和flexbox 来实现输出。解释一下，我正在创建一个登录屏幕，其中左侧的div 有一个完全覆盖div 的background-image，右侧是表单容器及其表单内容。我提供了一个 sn-p 来显示我正在尝试做的事情。
#page-login-template {
margin-top: -32px;
.column-wrapper{
display:flex;
}
.login-left {
background-image: url("assets/images/web_login@2x.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.login-right {
padding: 0 100px;
.login-logo {
padding:99px 0;
}
h4 {
font-family: Poppins;
font-size: 18px;
color: #0392cc;
}
.form-container {
padding: 20px 0;
.form-part-group {
padding: 10px 0;
}
[type=email],
[type=password],[type=text] {
height: 40px;
font-size: 18px;
font-family: Poppins;
color: #333;
}
[type=password],[type=text]{
border-right:0;
}
.input-group-addon {
background-color: white;
border-right: 1px solid #e9e9e9;
border-left:0;
border-top:1px solid #e9e9e9;
border-bottom: 1px solid #e9e9e9;
}
i{
font-size:18px;
}
.btn-login{
height:54px;
font-size:16px;
font-family:Poppins;
color:#fff;
background:#0570B6;
box-shadow: 0px 3px 6px #00000029;
}
.btn-login:hover{
background:#0570B6;
}
}
.form-container-2{
padding:20px 0;
p{
font-family: Poppins;
font-size: 12px;
color:#333;
font-weight:bold;
}
a{
color:#0392CC
}
}
.form-container-3{
padding-top:180px;
p{
font-family: Poppins;
font-size: 11px;
color:#333;
font-weight:bold;
}
a{
color:#0392CC
}
}
}
}<div id="page-login-template" class="container-fluid">
<div class="row column-wrapper">
<div class="col-lg-7 login-left"></div>
<div class="col-lg-5 login-right">
<div class="row login-logo text-center">
<img src='<?= get_stylesheet_directory_uri() . '/assets/images/logo/logo@2x.png' ?>' width="50%">
</div>
<h4 class="text-center">Login to My Account</h4>
<div class="row form-container">
<form class="form-horizontal">
<div class="row">
<div class="form-part-group col-lg-12">
<input id="email" type="email" class="form-control form-input-group email-input" data-error-required="This field is required" data-class-focus="email-input" placeholder="Email">
<div id="email" class="error-block"></div>
</div>
</div>
<div class="row form-part-group">
<div class="input-group col-lg-12 password-input">
<input id="password" type="password" class="form-control form-input-group" data-error-required="This field is required" data-class-focus="password-input" placeholder="Password">
<div class="input-group-addon">
<i class="fa fa-eye-slash password-eye hide-password "></i>
</div>
</div>
<div id="password" class="error-block"></div>
</div>
<div class="row">
<div class="form-part-group col-lg-12">
<button type="button" class="btn btn-block btn-login" disabled>Log In</button>
</div>
</div>
</form>
<div class="row form-container-2 text-center">
<p>Don't have an account yet? <a href="<?= site_url() . '/sign-up' ?>">Create An Account Now</a></p>
</div>
<div class="row form-container-3 text-center">
<p>Copyright © 2020. All Rights Reserved.</p>
<p><a href="<?= site_url() . '/terms-and-conditions' ?>">Terms & Conditions</a> and <a href="<?= site_url() . '/data-privacy-policy' ?>">Data Privacy Policy</a>
</div>
</div>
</div>
</div>
</div>如您所见，我通过填充表单上的内容来控制布局的高度。有没有办法在不依赖于表单高度的情况下获得相同的输出。
【问题讨论】：
标签： html css twitter-bootstrap-3 flexbox