同一水平行上的复选框

Question

我想将所有复选框显示在here所述的同一水平行上。

到目前为止，我的尝试导致了垂直堆叠：

http://jsfiddle.net/x1hphsvb/5536/

    <form>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
        <label class="form-check-label" for="inlineCheckbox1">1</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
        <label class="form-check-label" for="inlineCheckbox2">2</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
        <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
      </div>
    </form>

Answer 1

如果您正在使用Bootstrap（如屏幕截图所示），则类“ form-check-inline”应该可以工作。如果不是这样，则说明您缺少一些引导样式。

如果引导程序不是您所使用的，则可以通过以下方式简单地做到这一点：

.form-check {
  display: inline-block;
}

我已经更新了您的小提琴：http://jsfiddle.net/2svpjc5b/

Answer 2

为所有div标签添加样式。 <div class="form-check form-check-inline" style="display:inline">