Bootstrap 4表格对齐问题：Toggle Switches列对齐需求

Hey there! Let's sort out that Bootstrap 4 table toggle alignment issue you're facing. The goal is to get Option1 and Option2's toggle switches lined up perfectly in the second column (matching the first two rows), with their labels in the first column—here's how to make that happen:

Solution 1: Integrate Options into Table Rows #

If Option1 and Option2 are part of the same table context, the simplest fix is to add them as new rows using the exact same two-column structure as your existing rows. This ensures native table alignment without extra work:

<table class="table">
  <!-- Your existing table rows -->
  <tr>
    <td>First Row Label</td>
    <td>
      <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" id="toggle1">
        <label class="custom-control-label" for="toggle1"></label>
      </div>
    </td>
  </tr>
  <tr>
    <td>Second Row Label</td>
    <td>
      <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" id="toggle2">
        <label class="custom-control-label" for="toggle2"></label>
      </div>
    </td>
  </tr>
  <!-- Add Option1 and Option2 as new table rows -->
  <tr>
    <td>Option1</td>
    <td>
      <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" id="toggleOption1">
        <label class="custom-control-label" for="toggleOption1"></label>
      </div>
    </td>
  </tr>
  <tr>
    <td>Option2</td>
    <td>
      <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" id="toggleOption2">
        <label class="custom-control-label" for="toggleOption2"></label>
      </div>
    </td>
  </tr>
</table>

Solution 2: Use Bootstrap Grid for External Options #

If Option1 and Option2 need to live outside the table but still align with its columns, use Bootstrap's grid system to replicate the table's column widths. First, wrap your table in a table-responsive container, then create rows with columns that match the table's proportions:

<!-- Your existing table -->
<div class="table-responsive">
  <table class="table">
    <!-- Existing rows here -->
  </table>
</div>

<!-- Aligned Option1 & Option2 section -->
<div class="row mt-3">
  <div class="col-md-8"> <!-- Adjust this width to match your table's first column -->
    Option1
  </div>
  <div class="col-md-4"> <!-- Match the table's second column width -->
    <div class="custom-control custom-switch">
      <input type="checkbox" class="custom-control-input" id="toggleOption1">
      <label class="custom-control-label" for="toggleOption1"></label>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-8">
    Option2
  </div>
  <div class="col-md-4">
    <div class="custom-control custom-switch">
      <input type="checkbox" class="custom-control-input" id="toggleOption2">
      <label class="custom-control-label" for="toggleOption2"></label>
    </div>
  </div>
</div>

Quick Tips: #

• Double-check that all toggle switch containers use the same custom-control custom-switch classes to avoid inconsistent styling.
• If your table has fixed column widths, mirror those exact widths in the grid columns (e.g., col-9 and col-3 instead of col-md-8/col-md-4) for pixel-perfect alignment.

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