html - Bootstrap - 以内联形式在选择下方添加复选框

Question

我正在尝试在内联表单中的选择元素下方添加一个复选框。是否可以选择“中断”该行以在下方添加复选框？

这就是我要实现的目标:

这就是我现在拥有的:

jsFiddle

<div class="form-inline">
  <div class="form-group">
      <select class="form-control select-year text-smd">
          <option>Month</option>
          <option>January</option>
          <option>February</option>
      </select>
  </div>
  <div class="form-group">
      <select class="form-control select-year text-smd">
          <option>Year</option>
          <option>2016</option>
      </select>
  </div>

  <div class="form-group ml-15 mr-15">
      <label> - </label>
  </div>

  <div class="form-group">
      <select class="form-control select-year text-smd">
          <option>Month</option>
          <option>January</option>
          <option>February</option>
      </select>

  </div>
  <div class="form-group">
      <select class="form-control select-year text-smd">
          <option>Year</option>
          <option>2016</option>
      </select>
      <label class="checkbox-inline">
          <input type="checkbox" id="inlineCheckbox1" value="option1"> I currently work here
      </label>
  </div>
</div>

Answer 1

我认为最简单的方法是将它放在help-block 中并右对齐。然后添加一点 CSS 以覆盖顶部的 form-group 对齐方式。

.form-inline .form-group {
    vertical-align: top;
}

http://bootply.com/dCbo7trghW