移动屏幕尺寸的复选框（输入）高度和宽度是否发生变化？

Question

我有以下代码：

<div class="container-fluid mt-5">
  <div class="row">
    <div class="col-10">
      Hello
      <br>
      Hello
    </div>
    <div class="col-2">
        <input type="checkbox" class="w-100 h-100">
    </div>

  </div>
</div>

JS fiddle

这是桌面显示屏上的复选框：

这就是移动显示屏上的复选框：

我不明白为什么桌面显示的复选框大小正在改变。它是否应该具有相同的移动和桌面高度/宽度，因为我使用h-100和w-100专门设置其大小？

Answer 1

class = 'w-100 h-100'迫使他们使用100％的宽度和高度。如果您不需要，请尝试设置宽度和高度，而不是使用此类。

查看课程：

.h-100 {
    height: 100%!important;
}
.w-100 {
    width: 100%!important;
}

Answer 2

有一些问题。

复选框位于col-2内，宽度越来越窄。 height:100%和width:100%都相对于父容器（col-2）的大小。此外，height:100%仅在父级定义的高度为explained here时以及其他几个答案中有效。

此外，col-2具有影响输入大小的填充。