html - 同一水平行上的复选框

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”类应该可以工作。如果没有，您就缺少一些 Bootstrap 样式。

如果您没有使用 bootstrap，您可以简单地这样做:

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

我已经更新了你的 fiddle :http://jsfiddle.net/2svpjc5b/