Bug: Clicking the blank between the radio/checkbox and the text followed

[zhangshourui]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

When clicking the blank between the radio/checkbox button and the text followed, the radio/check status cannot be switched。

Reduced test cases

Because there is a margin-left: -1.5em, but the radio/checkbox only has 1em width. So a blank is left and cannot be clicked.

.form-check {
  display: block;
  min-height: $form-check-min-height;
  padding-left: $form-check-padding-start; //1.5em
  margin-bottom: $form-check-margin-bottom;

  .form-check-input {
    float: left;
    margin-left: $form-check-padding-start * -1;    // -1.5em. Cancel out padding-left
  }
}
.form-check-input {
  width: $form-check-input-width; // 1em here
  height: $form-check-input-width;
  …
}

To resolve it, add the following code.

.form-check .form-check-input + .form-check-label {
  margin-left: -($form-check-padding-start - $form-check-input-width);
  padding-left: $form-check-padding-start - $form-check-input-width;
}

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome, Microsoft Edge

What version of Bootstrap are you using?

v5.1.0

[mdo]

We won't be making any changes to this right now. Clicking on blank space is acceptable to me—it's the same reason we don't do block level for these so that clicking on the background does something unexpected. There's a reasonable assumption to make about the space between form field and label text, but I don't see the payoff other than something that's a little more clever and unexpected.

[coorasse]

Wow! This behavior is really annoying! It took me a bit to understand what was actually annoying me, and find out that the space between the button and the label is not clickable 😆
I received also reports of "sometimes click does not work"

[AccessViolator]

This IS a bug and must be reopened. The problem becomes more evident when checkboxes and radios are made "hoverable".
It was also considered a bug in v3
#13003
@zhangshourui, thanks for posting the workaround.