Add docs about input-group and dropdowns

[XhmikosR]

If you want to use a dropdown on the button that isn't at the last element of the input group, you can do it by using multiple .input-group-appends. I mentioned about this usage in #25075, but it isn't described in the documents.

Demo: https://codepen.io/anon/pen/wNJWeL

Why need multiple .input-group-append? A .dropdown-menu must be the last child of the wrapper (.dropdown, .btn-group or an element has position: relative). This mean the following code is incorrect:

<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown</button>
    <!-- dropdown-menu must be at the last of the container. -->
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

So, you should use multiple .input-group-appends:

<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

Originally posted by @ysds in https://github.com/twbs/bootstrap/issues/28150#issuecomment-459557777

[Ray-Aries]

Hi, @XhmikosR, This issue happen inside the .input-group-append class element only, and can't found this inside the .input-group-prepend class element. It is strange. See #30698 (I have append some detail information) At last, I add .rounded-0 for solve it.

[XhmikosR]

@MartijnCuppens @ffoodd feel free to close this if it's not valid anymore

[MartijnCuppens]

Not valid anymore indeed: https://v5.getbootstrap.com/docs/5.0/forms/input-group/#segmented-buttons

[XhmikosR]

@MartijnCuppens does it still happen on v4? The issue is about v4.

[MartijnCuppens]

Didn't check that indeed.

[mdo]

Sometimes I hate our input group lol. Updated the demo from the opening comment and there are issues with both append and prepend. https://codepen.io/emdeoh/pen/gOwBxzN