input-group buttons are misaligned

Created by: Alex-PK

When using this code in v4-alpha6:

<nav class="navbar bg-faded">
  <form class="form-inline my-2">
    <div class="input-group mx-2">
      <span class="input-group-addon">Monitoring:</span>
      <span class="input-group-btn">
        <button class="btn btn-outline-primary" type="button">All</button>
      </span>
      <span class="input-group-btn">
        <button class="btn btn-outline-success" type="button">Yes</button>
      </span>
      <span class="input-group-btn">
        <button class="btn btn-outline-danger" type="button">No</button>
      </span>
    </div>
  </form>
</nav>

I get this:

As you can see, the add-on buttons are overlapping by 2-3 pixels.

I tested it in both Firefox 44 and Chrome 59 on Ubuntu 17.04