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

我有以下代码：

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

你好


你好

这是桌面显示器上复选框的外观：

这是移动显示器上复选框的外观：

---

我不明白为什么桌面显示的复选框大小会改变。由于我使用

h-100

和

w-100

专门设置其大小，因此它的移动和桌面的高度/宽度是否应该相同？

类='w-100 h-100'强制它们使用100%的宽度和高度。如果不需要，请尝试设置宽度和高度，而不是使用此类

看看这些课程：

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

---

有几个问题

复选框位于宽度越来越窄的

col-2

中。

高度：100%

和

宽度：100%

都与父容器的大小相关（

col-2

）。另外，

height:100%

仅在父项具有定义的高度以及其他几个答案时有效

---

此外，

col-2

中的填充会影响输入的大小。

这可能会对ypu有所帮助。参见示例：为什么使用

h-100

和

w-100

类？