Question

我在调整某些项目时遇到了问题。

在以下this中，我有两个选项Option1和Option2。我想将切换开关与前两行中的切换开关对齐。

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

任何想法我该如何解决？

谢谢

Answer 1

你正在使用引导程序，所以我会放弃表格。但是如果你必须使用这些表，只需使表行和列均匀。

这里是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>

Bootstrap 4表对齐问题

1 个答案: