Как нажать «Запомнить меня» на следующую строку в Bootstrap 4

Question

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
          <label class="sr-only">Email</label>
          <input
            type="text"
            class="form-control mb-2 mr-sm-2"
            placeholder="Email"
          />
          <label class="sr-only">Password</label>
          <input
            type="password"
            class="form-control mb-2 mr-sm-2"
            placeholder="Password"
          />
          <button type="submit" class="btn btn-dark mb-2">Sign In</button>
          <div class="form-check mb-2 mr-sm-2">
            <input
              class="form-check-input"
              type="checkbox"
              id="inlineFormCheck"
            />
            <label class="form-check-label" for="inlineFormCheck">
              Remember me
            </label>
          </div>
        </form>

Как поставить флажок и метку «Запомнить меня» на следующую строку, чуть ниже метки электронной почты? Я использовал разрыв строки после кнопки «Войти», но она не работает.

Answer 1

Одним из способов было бы переместить флажок за пределы .form-inline класса, потому что он использует display: flex и flex-flow: row, который хранит все дочерние элементы в одной строке.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div class="form-inline">
    <label class="sr-only">Email</label>
    <input
      type="text"
      class="form-control mb-2 mr-sm-2"
      placeholder="Email"
    />

    <label class="sr-only">Password</label>
    <input
      type="password"
      class="form-control mb-2 mr-sm-2"
      placeholder="Password"
    />

    <button type="submit" class="btn btn-dark mb-2">Sign In</button>
  </div>
  <div class="form-check mb-2 mr-sm-2">
    <input
      class="form-check-input"
      type="checkbox"
      id="inlineFormCheck"
    />
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>
</form>