以下情况的原因是什么？

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>