Bootstrap 4表对齐问题

Question

I have a problem about aligning some items.

In the following Fiddle I have 2 options Option1 and Option2 . I would like to align the toggle switches with the ones in the first two rows.

Basically I want the toggle switches to be in the second column of the table and the text that are below them in the first column.

Any ideas how can I solve it ?

Thank you

Answer 1

You're using bootstrap, so I would ditch the tables. But if you must use the tables, simply make the table rows and columns uniform.

Here's an updated fiddle with the 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>