纯引导 4 单选按钮，其标签在其顶部，行与其图例对齐

如何解决纯引导 4 单选按钮，其标签在其顶部，行与其图例对齐

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

提前致谢

解决方法

您可以使用引导实用程序类轻松修改表格以匹配所需的布局：

• https://getbootstrap.com/docs/4.6/utilities/borders/
• https://getbootstrap.com/docs/4.6/utilities/text/
• https://getbootstrap.com/docs/4.6/utilities/vertical-align/
• https://getbootstrap.com/docs/4.6/utilities/spacing/

只需覆盖 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>