如何将复选框与表单中的其他输入控件垂直对齐?
Posted
技术标签:
【中文标题】如何将复选框与表单中的其他输入控件垂直对齐?【英文标题】:How to vertically align checkbox with other input controls in the form? 【发布时间】:2019-10-23 09:38:01 【问题描述】:我的复选框目前是这样对齐的 -
我想把它移到下面标记/指向的位置 -
我正在使用 Bootstrap 4。以下是我的 html -
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row form-group">
<label class="col-md-1 col-form-label" for="director">Director</label>
<div class="col-md-8">
<input class="form-control" type="text" id="director" name="director" placeholder="Director">
</div>
</div>
<div class="row form-group form-check">
<div class="col">
<input class="form-check-input" type="checkbox" id="released" name="released">
<label class="form-check-label" for="released">Released</label>
</div>
</div>
<div class="row form-group">
<label class="col-md-1 col-form-label" for="year">Year</label>
<div class="col-md-8">
<input class="form-control" type="text" id="year" name="year" placeholder="Year">
</div>
</div>
【问题讨论】:
【参考方案1】:就这么简单
<div class="row form-group">
<div class="col-md-11 offset-md-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="released" name="released">
<label class="form-check-label" for="released">Released</label>
</div>
</div>
</div>
演示: https://jsfiddle.net/davidliang2008/L1krytub/4/
IMO,我有点认为 col-md-1
对于您的标签来说不够宽。
【讨论】:
以上是关于如何将复选框与表单中的其他输入控件垂直对齐?的主要内容,如果未能解决你的问题,请参考以下文章