如何让Bootstrap带复选框的列表项文本垂直左对齐？

问题 #

使用Bootstrap构建的复选框下拉列表中，长文本选项（如"Sheet3 this is a bigger title of the science"）换行后，后续行左对齐到复选框位置，导致排版错乱，需要让所有文本行与第一行文本起始点垂直对齐。

解决方案 #

方案1：Flex布局（推荐） #

通过Flex布局分离复选框与文本，确保文本换行后保持对齐：

.list-group-item {
  display: flex;
  align-items: flex-start; /* 复选框与文本顶部对齐 */
}
.form-check-input {
  margin-top: 0.375rem; /* 微调复选框垂直位置，适配文本基线 */
}
.text-content {
  flex: 1; /* 文本占满剩余空间，自动换行 */
}

修改HTML，将文本包裹到<span class="text-content">中：

<div class="dropdown selection-l9zgqjql-gz80fbqg w-book-select w-50">
  <input type="text" class="form-control form-select dropdown-toggle show" data-bs-toggle="dropdown" value="All Sheets" aria-expanded="true" data-bs-auto-close="outside" readonly="" style="border-top-left-radius: 0px; border-bottom-left-radius: 0px;">
  <div class="dropdown-menu p-0 w-100 show" data-popper-placement="bottom-start" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(0px, 40px, 0px);">
    <div class="list-group">
      <label class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet1" checked="">
        <span class="text-content">Sheet1</span>
      </label>
      <label class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" name="workbookSelection" value="Sheet3 this is a bigger title of the science" checked="">
        <span class="text-content">Sheet3 this is a bigger title of the science</span>
      </label>
      <!-- 其余选项按同样方式修改 -->
    </div>
  </div>
</div>

方案2：无需修改HTML的文本缩进法 #

如果不想调整HTML结构，用绝对定位复选框+容器内边距实现对齐：

.list-group-item {
  padding-left: calc(1.5em + 0.5rem); /* 抵消复选框宽度，留出文本空间 */
  position: relative;
}
.form-check-input {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem; /* 垂直居中复选框 */
}

效果 #

两种方案都能让长文本换行后，所有行与第一行文本起始位置对齐，排版整齐。方案1采用现代Flex布局，兼容性和可维护性更好。

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