我无法在表单中将按钮全宽。另外,我希望按钮与表单底部对齐,因此它需要100%的宽度和底部空白。
我想我对某些容器有麻烦,因此无法使用标准的全角选项正确缩放它?
body {
font-family: 'Open Sans', sans-serif;
width: 100%;
text-align: center;
margin: 20px 0px 20px 0px;
}
.forma {
margin: 0 auto 0 auto;
max-width: 450px;
width: 450px;
height: 700px;
}
.fa-container {
float: left;
background-color: #0975BB;
width: 10%;
height: calc(1.5em + .75rem + 2px);
position: relative;
}
i {
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.form-control {
border-radius: 0%;
float: left;
width: 90%;
margin-bottom: 25px;
}
.btn {
border-radius: 0%;
width: 100%;
background-color: #0975BB;
border-style: hidden;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css " integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/script.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<div class="forma shadow p-3 mb-5 bg-white rounded">
<img class="top-logo" src="images/csd.png">
<form>
<div class="form-group">
<div class="fa-container">
<i class="fas fa-key"></i>
</div>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Šifra">
</div>
<div class="form-group">
<div class="fa-container">
<i class="fas fa-lock"></i>
</div>
<input type="password" class="form-control btn-block" id="exampleInputPassword1" placeholder="Lozinka">
</div>
<button type="button" class="btn btn-primary ">Sign In</button>
</form>
</div>
Bootstrap 4有一个预定义的类,为此在按钮类中添加了“ btn-block”
btn-block添加以下CSS样式
display: block;
width: 100%;
下面是如何使其接近所链接对象的示例
body {
font-family: 'Open Sans', sans-serif;
width: 100%;
text-align: center;
margin: 20px 0px 20px 0px;
}
.forma {
margin: 0 auto 0 auto;
max-width: 450px;
width: 450px;
height: 300px;
}
.fa-container {
float: left;
background-color: #0975BB;
width: 10%;
height: calc(1.5em + .75rem + 2px);
position: relative;
}
i {
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.form-control {
border-radius: 0%;
float: left;
width: 90%;
margin-bottom: 25px;
}
.btn {
border-radius: 0%;
width: 100%;
background-color: #0975BB;
border-style: hidden;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<body style="margin-top: 200px;">
<div class="forma shadow mb-5 bg-white rounded">
<img class="top-logo" src="images/csd.png">
<form>
<div class="form-group p-3">
<div class="fa-container">
<i class="fas fa-key"></i>
</div>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="Šifra">
</div>
<div class="form-group p-3">
<div class="fa-container">
<i class="fas fa-lock"></i>
</div>
<input type="password" class="form-control btn-block" id="exampleInputPassword1" placeholder="Lozinka">
</div>
<button type="button" class="btn btn-primary ">Sign In</button>
</form>
</div>
CSS应该写在<style>
标签或单独的文件中。
代码运行正常。如果也是全角,则该按钮。
在此处现场查看:https://codepen.io/manaskhandelwal1/pen/rNVWEEX
编辑
为此,请从具有类p-3
的div中删除mb-5
和.forma
类。