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>

但是“输入”位于“标签”标签下

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的所有网格系统来更好地微调不同设备尺寸上的显示，以不同方式对齐内容等。

Answer 2

您需要指定.col类以制作水平形式。

参考：https://getbootstrap.com/docs/4.3/components/forms/#horizontal-form

摘要：

<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 row">
  <div class="col-3">
    <label class="form-control-label" for="field_hasSernum">Has Sernum</label>
  </div>
  <div class="col-9">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" name="hasSernum" id="field_hasSernum">
    </div>
  </div>
</div>

CSS Bootstrap：如何排列项目？

2 个答案: