Bootstrap: поле ввода с флажками для небольших экранов

Question

Я хочу показать флажок рядом с входом.На больших экранах это работает:

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <form class="py-3">
    <div class="form-group">
      <label>Noise level</label>
      <div class="form-inline">
        <input type="number" class="form-control">
        <div class="form-check">
          <input type="checkbox" id="auto" class="form-check-input ml-2">
          <label class="form-check-label" for="auto">auto</label>
        </div>
      </div>
      <small class="form-text text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in leo ut turpis elementum dictum.</small>
    </div>
  </form>
</div>

Однако, когда вы нажимаете «Выполнить фрагмент кода» и «Полная страница» и пробуете его в узком окне браузера, оно выглядит следующим образом:

Как я могу исправить сломанную метку флажка?

Answer 1

Есть несколько вариантов, которые вы можете использовать вместо form-inline, хотя все они зависят от сетки начальной загрузки:

(1) Используйте input-group с input-group-append

<div class="form-group">
  <label>Noise level</label>
  <div class="input-group">
    <input type="number" class="form-control">
    <div class="input-group-append">
      <div class="input-group-text">
        <input type="checkbox" id="auto" class="mr-2">
        <label class="form-check-label" for="auto">auto</label>
      </div>
    </div>
  </div>
  <small class="form-text text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in leo ut turpis elementum dictum.</small>
</div>

(2) Используйте просто Сетка

<div class="form-group form-row align-items-center">
  <label class="col-12">Noise level</label>
  <div class="col-10">
    <input type="number" class="form-control">
  </div>

  <div class="col-2 text-center">
    <div class="form-check">
      <input type="checkbox" id="auto2" class="form-check-input">
      <label class="form-check-label" for="auto2">auto</label>
    </div>
  </div>

  <div class="col-12">
    <small class="form-text text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in leo ut turpis elementum dictum.</small>
  </div>
</div>

(3) Аналогично (1) вы все равно можете использовать input-group, но пропустите input-group-text, чтобы избежать обертки серого квадрата:

<div class="form-group">
  <label>Noise level</label>
  <div class="input-group">
    <input type="number" class="form-control">
    <div class="input-group-append">
      <div class="p-2">
        <input type="checkbox" id="auto3" class="mr-2">
        <label class="form-check-label" for="auto3">auto</label>
      </div>
    </div>
  </div>
  <small class="form-text text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in leo ut turpis elementum dictum.</small>
</div>

Вы можете просмотреть выходные данные всех 3 опций по адресу: https://www.bootply.com/VnuTFC0YrX

Какой из них лучший , вероятно, является вопросом предпочтения и цели. Я лучше всего отвечаю на первый вариант, так как способ, которым input-group комбинирует элементы формы, создает более глубокое ощущение двух соединяемых элементов.

Answer 2

из-за класса начальной загрузки .form-inline имеют flex-flow: row wrap;просто вы можете переопределить его в своем CSS и сделать его flex-flow: row nowrap;и добавьте класс .mr-2 к входу, чтобы дать право поля

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <form class="py-3">
    <div class="form-group">
      <label>Noise level</label>
      <div class="form-inline" style="flex-flow: row nowrap;">
        <input type="number" class="form-control mr-2">
        <div class="form-check">
          <input type="checkbox" id="auto" class="form-check-input">
          <label class="form-check-label" for="auto">auto</label>
        </div>
      </div>
      <small class="form-text text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in leo ut turpis elementum dictum.</small>
    </div>
  </form>
</div>

Answer 3

Другое решение, которое я нашел, - добавить класс form-check-inline к div.form-check:

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <form class="py-3">
    <div class="form-group">
      <label>Noise level</label>
      <div class="form-inline">
        <input type="number" class="form-control">
        <div class="form-check form-check-inline">
          <input type="checkbox" id="auto" class="form-check-input ml-2">
          <label class="form-check-label" for="auto">auto</label>
        </div>
      </div>
      <small class="form-text text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in leo ut turpis elementum dictum.</small>
    </div>
  </form>
</div>

Answer 4

Просто удалите ml-2 из флажка и добавьте mr-2 для ввода, чтобы оставленное поле не нарушало его.

<div class="container">
  <form class="py-3">
    <div class="form-group">
      <label>Noise level</label>
      <div class="form-inline">
        <input type="number" class="form-control mr-2">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="" id="auto">
          <label class="form-check-label" for="auto">auto</label>
        </div>
      </div>
      <small class="form-text text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in leo ut turpis elementum dictum.</small>
    </div>
  </form>
</div>

Пример кода: https://www.codeply.com/go/sQ8jFKLwRe