Question

这是一个美化问题，但我有一个表单，用于向预定义的收件人和/或自定义收件人发送邮件。但是如果你运行这个例子，你会发现复选框和最后一个选项的文本框有一个小的垂直对齐问题（理想情况下，复选框将垂直对齐到文本框的中心）。我可以手动覆盖复选框的上边距，内联样式为10px，但我希望有一个选项不依赖于文本框大小的假设？我已经尝试了输入组或表单内联的最后一个选项，但似乎没有一个是正确的，往往会使它变得更糟。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Recipient Types</label>
    <div class="col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox" />Send to Sales Department
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" />Send to HR Department
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" />
          <input type="text" class="form-control" />
        </label>
      </div>
    </div>
  </div>
</form>

Bootstrap中的多个复选框，带有自定义的最后一个选项

0 个答案: