如何将 .form-check-inline 按钮与标签分开放置？答案

【问题标题】：How can I have .form-check-inline buttons in a separate line from their label?如何将 .form-check-inline 按钮与标签分开放置？
【发布时间】：2019-04-04 22:07:31
【问题描述】：

我正在实现一个包含一些单选按钮的表单。使用 Bootstrap 4，我想使用 .form-check-inline 使它们水平对齐，但有将它们与输入标签放在同一行的副作用：

<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
      <form>
        <div class="form-group">
          <label>Label</label>
          <div class="form-check form-check-inline">
            <label class="form-check-label">
              <input type="radio" name="test">
              Option 1
            </label>
          </div>
          <div class="form-check form-check-inline">
            <label class="form-check-label">
              <input type="radio" name="test">
              Option 2
            </label>
          </div>
        </div>
      </form>
    </div>
  </body>
</html>

.. 这对我来说看起来不太好。我实际上希望标签保留在自己的行中，单选按钮位于下一行。如何在尊重 Bootstrap 模式的同时实现这一目标？

【问题讨论】：

标签： html css forms bootstrap-4

【解决方案1】：

两个输入的三个标签是否有效且可访问？您可能应该对第一个元素使用图例元素。

<div class="container">
  <form>
    <div class="form-group">
      <legend>Legend</legend>

      <div class="form-check form-check-inline">
        <label class="form-check-label">
          <input type="radio" name="test">
          Label 1
        </label>
      </div>

      <div class="form-check form-check-inline">
        <label class="form-check-label">
          <input type="radio" name="test">
          Label 2
        </label>
      </div>

    </div>
  </form>
</div>

Demo

【讨论】：

哦，谢谢，现在看起来不错。但是，legend 实际上不是必须与字段集一起使用吗？参考 Bootstraps v4 表单文档，我现在看到图例用于检查，而标签似乎用于其他所有内容。仅使用图例是否有意义？
图例用于包装多个元素，而标签通过 ID 或标记结构链接到单个输入。你可能很想使用一个字段集。

【解决方案2】：

尝试将 label 放在 form 标记之外... 像这样：

    <!DOCTYPE html>
<html>
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
     <label>Label</label> <!-- In here -->
      <form>
        <div class="form-group">
          <div class="form-check form-check-inline">
            <label class="form-check-label">
              <input type="radio" name="test">
              Option 1
            </label>
          </div>
          <div class="form-check form-check-inline">
            <label class="form-check-label">
              <input type="radio" name="test">
              Option 2
            </label>
          </div>
        </div>
      </form>
    </div>
  </body>
</html>
</html>

【讨论】：

你说得对，我的意思是在 form 标签和上面
在Bootstrap中，有很多这样标注组件的例子
那么你会想要更新你的答案。也许包括参考链接。