Question

我在引导程序中有以下代码。我需要将标签与复选框对齐，但是即使在查看了一些解决方案后，我仍然没有成功：

<div class="row">
  <div class="col-md-3 col-sm-6 col-xs-12">
    <label>
      Show entities?
      <input type="checkbox" style="margin: 6px 0 0;" id="inactiveEnt" name="checkbox">
    </label>
  </div>           
  <div class="col-md-8" id="isactiveTxt">
    <span style="font-weight:bold">Note: "-" inactive</span>
  </div>
</div>

Answer 1

如果您使用的是Bootstrap，只需使用一个表单组即可。创建标签并使用与输入ID相匹配的“ for”属性来引用输入。

<div class="form-group row">
    <label for="myInput" class="col-sm-2 col-form-label">Input Label</label>
    <div class="col-sm-10">
      <input type="checkbox" class="form-check-input" id="myInput" placeholder="Input Here">
    </div>
</div>

Answer 2

如果我了解您想要的内容，那么我认为这可能是您正在寻找的解决方案（将btn和btn-default类添加到您的输入元素中，使其与标签文本垂直对齐）

<div class="row">
  <div class="col-xs-12">
    <span>
      <input type="checkbox" class="btn btn-default">
    </span>
    <label class="form-label">here is my label</label>
  </div>
</div>

这是小提琴：https://jsfiddle.net/p9wud84v/1/

Answer 3

尝试此代码段希望对您有所帮助：

<div class="row">
  <div class="col-md-3 col-sm-6 col-xs-12">
    <label class="d-flex align-items-center"> Show entities? <input type="checkbox"  id="inactiveEnt" name="checkbox" class="ml-3"> </label>
  </div>           
  <div class="col-md-8" id="isactiveTxt">
    <span style="font-weight:bold">Note: "-" inactive</span>
  </div>
</div>

Answer 4

考虑到您使用的是Bootstrap 4，可以执行此操作以获取结果

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="form-group form-check">
  <input type="checkbox" class="form-check-input" id="exampleCheck1">
  <label class="form-check-label" for="exampleCheck1">Show entities?</label>
</div>

<!-- or using inline form -->

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="inlineFormCheck">
  <label class="form-check-label" for="inlineFormCheck">
    Show entities?
  </label>
</div>

将复选框与标签对齐

4 个答案: