input-group buttons are misaligned

[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

[michaelwoodew]

Correct, It is on this fiddle
https://jsfiddle.net/enwfc3q5/

[mdo]

Confirmed on my end. Looks like we're giving all those left and right negative margin. Will need to revisit some selectors there.

[gijsbotje]

could this work?
https://codepen.io/gijsbotje/pen/pwxbXx