Inline checkbox and radio -> unecessarily different markup

Created by: bkdotcom

default stacked (and without label) markup:

<div class="form-check disabled">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" value="pick me" disabled>
    Giant Meteor
  </label>
</div>

inline markup:

<label class="form-check-inline disabled">
  <input class="form-check-input" type="checkbox" value="pick me" disabled> I'm not grey - fixed in a5
</label>

Proposed markup for inline: keep wrapper

; label's class is same as stacked; disabled class would go on the wrapper (consistent with stacked)

<div class="form-check form-check-inline disabled">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" value="pick me" disabled>
    Same is good
  </label>
</div>

• The only difference is the class attribute for the outer wrapper.
• We're not removing the div + changing the label's class
• adding the disabled class is consistent
• procedural / dynamic / templating easier.. don't need a separate template for inline,, just a different class attribute on the wrapper

It makes no difference to me whether inline is accomplished by adding the class form-check-inline or replacing form-check with form-check-inline (seems like maintaining css - would be easier by adding form-check-inline)

Different markup leads to issues like #20799 (closed) (fix pending for a5) (currently need separate selectors for inline .disabled)

(this annoyance exists in Bootstrap 3 as well - lets get it right in 4!) 🤓