Issues with buttons inside input-groups

[nwoltman]

I realized there's a little bit of a problem with my fix in #22612. The CSS for input-group-btn uses negative margins to overlap borders (so there is only 1 border width between buttons) which was fine with a solid border color, but now with translucent borders they combine to make a darker border:

This could be fixed by removing either the left or right border of buttons inside input-group-btns.

I can submit a PR that does this if this seems like the right way to go. However, there are a couple other issues I'd like to bring up because they can be addressed in the same PR.

First, the current code of input-group-btn seems to try to support the following HTML structures:

<!-- 1 -->
<div class="input-group">
  <div class="input-group-btn">
    <button class="btn" />
  </div>
  <div class="input-group-btn">
    <button class="btn" />
  </div>
</div>

<!-- 2 -->
<div class="input-group">
  <div class="input-group-btn">
    <button class="btn" />
    <button class="btn" />
  </div>
</div>

<!-- 3 -->
<div class="input-group">
  <div class="input-group-btn">
    <div class="btn-group">
      <button class="btn" />
      <button class="btn" />
    </div>
  </div>
</div>

Unfortunately, 2 and 3 are mostly broken right now. Should Bootstrap support all three of these structures?

Finally, @mdo do you think btn-groups should have a translucent border similar to input-groups (as in all the time, even when they're not inside an input-group-btn)? The decision on that will affect the code for handling btn-groups inside input-groups.

Side note: Issue #23006 is related to this.

[mdo]

Closing as duplicate of #23379.