我将此表单放入类容器的div中,我想知道为什么标签在输入字段旁边对齐水平。我应该在css文件中添加什么?
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
</form>
答案 0 :(得分:2)
为form-group
使用flexbox是一种选择。这个布局是你需要的吗?
.form-group {
display: flex;
justify-content: space-between;
align-items: center;
width: 40%;
}
.form-group:not(:last-child) {
margin-bottom: .5em;
}
&#13;
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
</form>
&#13;
答案 1 :(得分:0)
它是因为您的标签的类别为-sm-2
,其中一个-sm-10
,且两者都显示为inline
。
你需要添加你的CSS:
.control-label {display: block}
.form-group div {display: block}
答案 2 :(得分:0)
试试这个:
.form-group {
display: table-row;
}
.col-sm-10 ,label {
display: table-cell;
padding: 5px;
}
.form-group {
display: table-row;
}
.col-sm-10 ,label {
display: table-cell;
padding: 5px;
}
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
</form>