我正在使用引导表单元素,我想将所有表单元素居中。我尝试过添加空白:对表单控件类来说是0 auto!important,但是填充/空白仍然存在问题。输入字段的左侧和右侧填充/边距仍然不均匀。另外,文本区域和按钮位于左侧。牢记响应式设计,解决此问题的最佳方法是什么?
HTML:
<form class="form">
<h4 class="form-contactme">Contact Me</h4>
<div class="form-row">
<div class="form-group col-sm-6">
<label for="firstName" class="form-inputlabel">First Name</label>
<input type="text" class="form-control" id="firstName" placeholder="First Name">
</div>
<div class="form-group col-sm-6">
<label for="lastName" class="form-inputlabel">Last Name</label>
<input type="text" class="form-control" id="lastName" placeholder="Last Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-6">
<label for="email" class="form-inputlabel">Email</label>
<input type="email" class="form-control" id="email" placeholder="you@example.com">
</div>
<div class="form-group col-sm-6">
<label for="phone" class="form-inputlabel">Phone</label>
<input type="number" class="form-control" id="phone" placeholder="xxx-xxx-xxxx">
</div>
<div class="form-row">
<div class="form-group">
<label for="messageBox">Send me a message <i class="far fa-smile-beam"></i></label>
<textarea type="text" class="form-control" id="messageBox"></textarea>
</div>
</div>
<div class="form-row">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Scss:
.form{
padding:3% !important;
background-color:#9fd199;
margin-bottom:5%;
&-contactme{
font-size:1.8rem;
font-weight:900;
text-align:center;
margin-bottom:15%;
}
&-row{
width:100%;
}
&-inputlabel{
display:none;
}
&-control{
margin-left:0 auto !important;
}
}
答案 0 :(得分:2)
这是由于表单类的默认填充和空白所致。
您必须删除默认的填充和边距,以使元素居中并在同一行中对齐。
在CSS中添加以下行
.form-group, .form-row > .col, .form-row > [class*="col-"] {
padding-left:0;
padding-right:0;
}
.form-row{
margin:0;
}
有效的Codepen链接:https://codepen.io/Ev1tw1n/pen/xmdjeL
答案 1 :(得分:0)
您错过了期末股息。现在检查
<form class="form">
<h4 class="form-contactme">Contact Me</h4>
<div class="form-row">
<div class="form-group col-sm-6">
<label for="firstName" class="form-inputlabel">First Name</label>
<input type="text" class="form-control" id="firstName" placeholder="First Name">
</div>
<div class="form-group col-sm-6">
<label for="lastName" class="form-inputlabel">Last Name</label>
<input type="text" class="form-control" id="lastName" placeholder="Last Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-6">
<label for="email" class="form-inputlabel">Email</label>
<input type="email" class="form-control" id="email" placeholder="you@example.com">
</div>
<div class="form-group col-sm-6">
<label for="phone" class="form-inputlabel">Phone</label>
<input type="number" class="form-control" id="phone" placeholder="xxx-xxx-xxxx">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="messageBox">Send me a message <i class="far fa-smile-beam"></i></label>
<textarea type="text" class="form-control" id="messageBox"></textarea>
</div>
</div>
<div class="form-row">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
答案 2 :(得分:0)
在容器中添加显示柔性,然后您可以使用align-items: center
.form-group, .form-row {
display: flex;
flex-direction: column;
align-items: center;
}
.form {
padding: 3% !important;
background-color: #9fd199;
margin-bottom: 5%;
}
.form-group,
.form-row {
display: flex;
flex-direction: column;
align-items: center;
}
.form-contactme {
font-size: 1.8rem;
font-weight: 900;
text-align: center;
margin-bottom: 15%;
}
.form-row {
width: 100%;
}
.form-inputlabel {
display: none;
}
.form-control {
margin-left: 0 auto !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<form class="form">
<h4 class="form-contactme">Contact Me</h4>
<div class="form-row">
<div class="form-group col-sm-6">
<label for="firstName" class="form-inputlabel">First Name</label>
<input type="text" class="form-control" id="firstName" placeholder="First Name">
</div>
<div class="form-group col-sm-6">
<label for="lastName" class="form-inputlabel">Last Name</label>
<input type="text" class="form-control" id="lastName" placeholder="Last Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-6">
<label for="email" class="form-inputlabel">Email</label>
<input type="email" class="form-control" id="email" placeholder="you@example.com">
</div>
<div class="form-group col-sm-6">
<label for="phone" class="form-inputlabel">Phone</label>
<input type="number" class="form-control" id="phone" placeholder="xxx-xxx-xxxx">
</div>
<div class="form-row">
<div class="form-group">
<label for="messageBox">Send me a message <i class="far fa-smile-beam"></i></label>
<textarea type="text" class="form-control" id="messageBox"></textarea>
</div>
</div>
<div class="form-row">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>