Question

我正在实现包含一些单选按钮的表单。使用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模式的同时如何实现这一目标？

Answer 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

Answer 2

尝试将标签放在 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-check-inline按钮？

2 个答案: