如何在 Bootstrap 选项卡文本旁边放置一个复选框并在选项卡中对齐所有内容？

Question

有人可以帮助我对齐文本和复选框，以便它们都位于此处的选项卡内，最好不使用 CSS 或使用内联 CSS。

我尝试了几种不同的方法，但引导程序不是我的强项，我使用 CRUD 框架来处理引导程序方面的事情，但我需要做这样的事情，以便最终用户可以选择要导出的选项卡。

<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 2 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 2 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>

在这里摆弄

Answer 1

在您的情况下可以使用 d-flex 和align-items-center 类或使用自定义CSS

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