Add docs about input-group and dropdowns

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 (closed), 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