如何在Bootstrap标签内添加复选框并与文本对齐（尽量不用额外CSS）

需要在Bootstrap的nav-tabs标签内实现文本与checkbox的垂直对齐，优先使用Bootstrap原生类，尽量不额外添加CSS或仅使用行内CSS。目前通过CRUD框架处理Bootstrap相关代码，最终要实现终端用户可选择标签导出的功能。

现有代码示例：

<div class="container">
  <ul class="nav nav-tabs">
    
    <!-- Tab 1 with Checkbox -->
    <li class="nav-item">
      <a class="nav-link" href="#">
        <span class="d-flex align-items-center">
          Badger
          <input class="form-check-input" type="checkbox" id="checkTab1">
        </span>
      </a>
    </li>
    
    <!-- Tab 2 with Checkbox -->
    <li class="nav-item">
      <a class="nav-link" href="#">
        <span class="d-flex align-items-center">
          Cat
          <input class="form-check-input" type="checkbox" id="checkTab2">
        </span>
      </a>
    </li>
    
    <!-- Tab 3 with Checkbox -->
    <li class="nav-item">
      <a class="nav-link" href="#">
        <span class="d-flex align-items-center">
          Foo
          <input class="form-check-input" type="checkbox" id="checkTab3">
        </span>
      </a>
    </li>
    
    <!-- Tab 4 with Checkbox -->
    <li class="nav-item">
      <a class="nav-link" href="#">
        <span class="d-flex align-items-center">
          Bar
          <input class="form-check-input" type="checkbox" id="checkTab4">
        </span>
      </a>
    </li>
  </ul>
</div>

方法1：原生间距类+行内样式微调 #

用Bootstrap自带的gap-2给文本和checkbox添加水平间距，同时给checkbox加行内样式去掉默认左外边距，配合已有的align-items-center实现完美垂直对齐：

<div class="container">
  <ul class="nav nav-tabs">
    
    <!-- Tab 1 with Checkbox -->
    <li class="nav-item">
      <a class="nav-link" href="#">
        <span class="d-flex align-items-center gap-2">
          Badger
          <input class="form-check-input" type="checkbox" id="checkTab1" style="margin-left:0;">
        </span>
      </a>
    </li>
    
    <!-- Tab 2 with Checkbox -->
    <li class="nav-item">
      <a class="nav-link" href="#">
        <span class="d-flex align-items-center gap-2">
          Cat
          <input class="form-check-input" type="checkbox" id="checkTab2" style="margin-left:0;">
        </span>
      </a>
    </li>
    
    <!-- Tab 3 with Checkbox -->
    <li class="nav-item">
      <a class="nav-link" href="#">
        <span class="d-flex align-items-center gap-2">
          Foo
          <input class="form-check-input" type="checkbox" id="checkTab3" style="margin-left:0;">
        </span>
      </a>
    </li>
    
    <!-- Tab 4 with Checkbox -->
    <li class="nav-item">
      <a class="nav-link" href="#">
        <span class="d-flex align-items-center gap-2">
          Bar
          <input class="form-check-input" type="checkbox" id="checkTab4" style="margin-left:0;">
        </span>
      </a>
    </li>
  </ul>
</div>

方法2：贴合Bootstrap表单规范的写法 #

把文本和checkbox用form-check-inline容器包裹，搭配align-items-center和mb-0消除默认边距，让整体更符合Bootstrap组件规范：

<div class="container">
  <ul class="nav nav-tabs">
    
    <!-- Tab 1 with Checkbox -->
    <li class="nav-item">
      <a class="nav-link d-flex align-items-center p-2" href="#">
        <div class="form-check-inline d-flex align-items-center gap-2">
          <label class="form-check-label mb-0">Badger</label>
          <input class="form-check-input" type="checkbox" id="checkTab1">
        </div>
      </a>
    </li>
    
    <!-- Tab 2 with Checkbox -->
    <li class="nav-item">
      <a class="nav-link d-flex align-items-center p-2" href="#">
        <div class="form-check-inline d-flex align-items-center gap-2">
          <label class="form-check-label mb-0">Cat</label>
          <input class="form-check-input" type="checkbox" id="checkTab2">
        </div>
      </a>
    </li>
    
    <!-- Tab 3 with Checkbox -->
    <li class="nav-item">
      <a class="nav-link d-flex align-items-center p-2" href="#">
        <div class="form-check-inline d-flex align-items-center gap-2">
          <label class="form-check-label mb-0">Foo</label>
          <input class="form-check-input" type="checkbox" id="checkTab3">
        </div>
      </a>
    </li>
    
    <!-- Tab 4 with Checkbox -->
    <li class="nav-item">
      <a class="nav-link d-flex align-items-center p-2" href="#">
        <div class="form-check-inline d-flex align-items-center gap-2">
          <label class="form-check-label mb-0">Bar</label>
          <input class="form-check-input" type="checkbox" id="checkTab4">
        </div>
      </a>
    </li>
  </ul>
</div>

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