html - Bootstrap 4 表对齐问题

Question

我在对齐某些元素时遇到问题。

在下面Fiddle我有 2 个选项 Option1 和 Option2。我想将拨动开关与前两行中的拨动开关对齐。

基本上我希望切换开关位于表格的第二列，而它们下方的文本位于第一列。

有什么办法可以解决吗？

谢谢

Answer 1

您使用的是 Bootstrap ，所以我会放弃表格。但如果一定要使用表格，只需将表格的行列统一即可。

这是一个更新的 fiddle correct nesting

<div class="container">
  <table class="table table-bordered">
      <thead style="" class="">
          <tr class="d-flex">
              <th class="col-6">My </th>
              <th class="col-6"></th>
          </tr>
      </thead>
      <tbody>
          <tr class="d-flex">
              <td class="text-sm-left col-sm-11">some text
              </td>
              <td class="text-sm-right col-sm-1">
                <div class="switch">
                  <input id="cmn-toggle-5" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
                  <label for="cmn-toggle-5"></label>
                </div>
              </td>
          </tr>
          <tr class="d-flex">
              <td class="text-sm-left col-sm-11">some text
              </td>
              <td class="text-sm-right col-sm-1">
                <div class="switch">
                  <input id="cmn-toggle-5" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
                  <label for="cmn-toggle-5"></label>
                </div>
              </td>
          </tr>
          <tr class="d-flex">
              <td class="col-sm-12">testtexttex :</td>
          </tr>

          <tr class="d-flex">
              <td class="col-sm-11">Option1
                 <button type="button" class='btn btn-secondary '>
                     <span class="fa fa-envelope"></span>
                 </button></td>
              <td class="col-sm-1">
                <div class="switch">
                  <input id="cmn-toggle-5" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
                  <label for="cmn-toggle-5"></label>
                </div>
              </td>
          </tr>
          <tr class="d-flex">
              <td class="col-sm-11">Option2
                 <button type="button" class='btn btn-secondary '>
                     <span class="fa fa-envelope"></span>
                 </button></td>
              <td class="col-sm-1">
                <div class="switch">
                  <input id="cmn-toggle-5" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
                  <label for="cmn-toggle-5"></label>
                </div>
              </td>
          </tr>
      </tbody>
  </table>
</div>