Bootstrap 5.3.0复选框宽度不一致问题求助

我在使用Bootstrap 5.3.0构建表单时，用以下CSS代码缩放复选框并设置右外边距：

CSS代码 #

input[type='checkbox']
{
    transform: scale( 2 );
    margin-right: 1.5em;
}

搭配的HTML结构如下：

HTML结构 #

<div class="form-check d-flex align-items-center mb-3">
    <input class="form-check-input" type="checkbox" value="" id="mChk1">
    <label class="form-check-label" for="mChk1">
        t urpt uwit urig ejgwugjmbnesiwhr wit pwi ho joid wptig wuweo
    </label>
</div>

<div class="form-check d-flex align-items-center mb-3">
    <input class="form-check-input" type="checkbox" value="" id="mChk2">
    <label class="form-check-label" for="mChk2">
        t urpt uwit urig ejgwugjmbnesiwhr wit pwi ho joid wptig wuweo owugwkvn wptewuglbwgutw nbwp riweupriu eoriwei wruwe oruweknwprfeoi uwepowpeoi urwepoiw epoif wpeihwephpo nwpwhfwepoio wieru eiurewpir f powg
    </label>
</div>

实际效果中两个复选框宽度不一致（效果截图：），完整示例代码如下：

完整示例代码 #

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

  <title>Bootstrap Example</title>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

  <style>
    input[type='checkbox'] {
      transform: scale( 2);
      margin-right: 1.5em;
    }
  </style>
</head>

<body class="p-3 m-0 border-0 bd-example m-0 border-0">
  <div class="form-check d-flex align-items-center mb-3">
    <input class="form-check-input" type="checkbox" value="" id="mChk1">
    <label class="form-check-label" for="mChk1">
          t urpt uwit urig ejgwugjmbnesiwhr wit pwi ho joid wptig wuweo
      </label>
  </div>

  <div class="form-check d-flex align-items-center mb-3">
    <input class="form-check-input" type="checkbox" value="" id="mChk2">
    <label class="form-check-label" for="mChk2">
          t urpt uwit urig ejgwugjmbnesiwhr wit pwi ho joid wptig wuweo owugwkvn wptewuglbwgutw nbwp riweupriu eoriwei wruwe oruweknwprfeoi uwepowpeoi urwepoiw epoif wpeihwephpo nwpwhfwepoio wieru eiurewpir f powg
      </label>
  </div>
</body>

</html>

请问这是什么原因导致的？

问题核心在于**transform: scale()仅改变元素视觉显示大小，不会修改它在文档流中的实际占位尺寸**，再结合Bootstrap默认的复选框布局逻辑，最终引发视觉偏差：

• Bootstrap的.form-check默认是相对定位，.form-check-input采用绝对定位，原本通过margin-left预留出复选框的占位空间，让标签文本避开该区域。
• 你用transform: scale(2)把复选框视觉放大了，但它的实际占位还是原始大小，margin-right:1.5em也是作用在这个原始尺寸的元素上。
• 当第二个复选框的标签文本过长换行时，Flex布局（d-flex）会重新计算内部元素的可用空间，此时复选框的实际占位和视觉尺寸不匹配，导致两个复选框的视觉对齐位置出现差异，看起来像是宽度不一致。

简单来说，缩放只是视觉层面的放大，元素在布局中占的空间没变化，和换行的标签文本布局冲突，才出现了这种视觉问题。

内容的提问来源于stack exchange，提问作者s k