html - CSS Bootstrap : How to line up items?

Question

我想排列标签和输入标签。

<div class="form-group row">
   <label class="form-control-label" 
    for="field_hasSernum">Has Sernum</label>
   <input type="checkbox" class="form-control" name="hasSernum" id="field_hasSernum"/>
</div>

但是“input”位于“label”标签下

Answer 1

如果您查看 Bootstrap 关于其表单布局的文档，他们建议合并他们的网格系统以水平方式对齐您的标签/输入:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="form-group form-row">
  <label class="form-control-label col-2" for="field_hasSernum">Has Sernum</label>
  <div class="col-10">
    <input type="checkbox" class="form-control" name="hasSernum" id="field_hasSernum"/>
  </div>
</div>

就是这么简单!您可以利用 Bootstrap 的所有网格系统来更好地微调不同设备尺寸的显示，以不同的方式对齐事物等。