Bootstrap 4中card与form-check-inline复选框布局异常问题咨询

这不是card类的问题，而是你没有遵循Bootstrap 4卡片组件的正确结构导致的~

问题根源 #

Bootstrap 4的card组件有固定的结构规范：卡片的主体内容需要放在card-body容器内，而你当前的代码中，直接把form-check-inline元素放在card下（与card-header同级），没有包裹在card-body里。这种结构会让表单元素继承card的块级默认样式，从而破坏form-check-inline的内联布局逻辑，导致复选框变成垂直排列。

修正后的代码 #

<div class="container">
  <h2>Form control: inline checkbox</h2>
  <p>The form below contains two inline checkboxes:</p>
  <form action="/action_page.php">
    <div class="card" style="margin-top:2%">
      <div class="card-header"> Test </div>
      <!-- 添加card-body容器包裹表单元素 -->
      <div class="card-body">
        <div class="form-check-inline">
          <label class="form-check-label" for="check1">
            <input type="checkbox" class="form-check-input" id="check1" name="vehicle1" value="something" checked>Option 1
          </label>
        </div>
        <div class="form-check-inline">
          <label class="form-check-label" for="check2">
            <input type="checkbox" class="form-check-input" id="check2" name="vehicle2" value="something">Option 2
          </label>
        </div>
      </div>
    </div>
  </form>
</div>

补充说明 #

只要把内联复选框放在card-body中，就能恢复form-check-inline的正常并排效果，因为card-body会维持正确的内容布局上下文，不会干扰表单内联元素的样式。

内容的提问来源于stack exchange，提问作者Robert Sinkovic