Как можно расположить кнопки .form-check-inline на отдельной строке от их надписи? - PullRequest
Новая
       0

Как можно расположить кнопки .form-check-inline на отдельной строке от их надписи?

0 голосов
/ 31 октября 2018

Я реализую форму, содержащую несколько переключателей. Используя 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?

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

Имеет ли три метки для двух входов допустимые и доступные? Возможно, вам следует использовать элемент легенды для первого. 

<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>

Демо

0 голосов
/ 31 октября 2018

Попробуйте поместить метку вне тега формы ... Как это: 

    <!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...