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小提琴

这是复选框在桌面显示器上的样子：

这就是复选框在移动显示器上的样子：

我不明白为什么桌面显示器的复选框大小会发生变化。由于我专门使用h-100and设置它的大小，它是否应该在移动设备和桌面设备上不具有相同的高度/宽度w-100？

标签： cssbootstrap-4

Answer 1

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

查看课程：

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