в чем причина следующей ситуации?

Question

в чем причина? мой код для этой части:

<label class="form-check-label">
      <input type="checkbox" class="form-check-input">
      <small>Remember Me</small>
</label>

Почему флажок сбоя и текст, как показано на рисунке ??

плз .. помогите мне. Заранее спасибо.

Answer 1

Размещение этикетки внутри <div class="form-check"> решит вашу проблему.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="form-check">
<label class="form-check-label">
      <input type="checkbox" class="form-check-input">
      <small>Remember Me</small>
</label>
</div>