button-radio breaks when inside carousel

Created by: vwieczorek

As title suggests, buttons-radio elements break when placed inside a carousel. Upon clicking a button in the group, the items become misaligned.

The issue is easily reproducible:

<div id="myCarousel" class="carousel slide">
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
                <!-- Button Group -->
            <div class="controls">
                <div class="btn-group" data-toggle="buttons-radio">
                    <button type="button" class="btn">Left</button>
                    <button type="button" class="btn">Middle</button>
                    <button type="button" class="btn">Right</button>
                </div>
            </div>
        </div>
        <div class="item"><h1>Page 2</h1></div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div>