时间戳

首页 > 解决方案 > 纯 bootstrap 4 单选按钮，其标签位于顶部，行与图例对齐

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

问题描述

我想知道是否有可能使用纯引导程序 4 获得与以下布局完全相同的表单，或者我必须使用 CSS 以及如何使用。我已经搜索过了，但其他元素都在哪里。 单选按钮表单的布局

提前致谢

标签： bootstrap-4radio-buttonalignment

解决方案

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

只需覆盖即可完成以下操作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>

推荐阅读