纯 bootstrap 4 单选按钮，其标签位于其顶部且行与其图例对齐

Question

我想知道是否可以使用纯 bootstrap 4 来制作完全类似于以下布局的表格，或者我必须使用 CSS 以及如何使用。我已经搜索过，但都在其他元素上。

提前致谢

Answer 1

您可以使用 bootstrap 实用程序轻松修改 table 以匹配您想要的布局类:

仅需覆盖 border-color:

即可完成以下操作

tr.border-bottom {
  border-color: black !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col">
      <form>
        <table class="table">
          <tr class="text-center">
            <td class="col">
              <!-- makes this column grow -->
            </td>
            <th>header text</th>
            <th>header text</th>
            <th>header text</th>
            <th>header text</th>
            <th>header text</th>
          </tr>

          <tr class="text-center border-bottom">
            <td class="text-left border-0 p-0">1. legend</td>
            <td class="border-0 align-middle p-0"><input type="radio"></td>
            <td class="border-0 align-middle p-0"><input type="radio"></td>
            <td class="border-0 align-middle p-0"><input type="radio"></td>
            <td class="border-0 align-middle p-0"><input type="radio"></td>
            <td class="border-0 align-middle p-0"><input type="radio"></td>
          </tr>

          <tr class="text-center border-bottom">
            <td class="text-left border-0 p-0">1. legend</td>
            <td class="border-0 align-middle p-0"><input type="radio"></td>
            <td class="border-0 align-middle p-0"><input type="radio"></td>
            <td class="border-0 align-middle p-0"><input type="radio"></td>
            <td class="border-0 align-middle p-0"><input type="radio"></td>
            <td class="border-0 align-middle p-0"><input type="radio"></td>
          </tr>
        </table>
      </form>
    </div>
  </div>
</div>

纯 bootstrap 4 单选按钮，其标签位于其顶部且行与其图例对齐

pure bootstrap 4 radio button with their label on top of them and row aligned with their legend

alignment

radio-button

bootstrap-4