css - 移动屏幕尺寸的复选框(输入)高度和宽度发生变化？

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;
}