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

Question

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

这就是我想要实现的目标：

这就是我现在所拥有的：

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

Answer 2

最佳答案是来自Aramil（在评论中） 如果你想要“懒惰”选项，你可以随时使用这个 （我不建议使用此代码，而是使用网格）

.checkbox-inline{
  position: relative;
  top: 2em;
  right: 11em;
}