Affix Issue - Bootstrap 3.3.0

by isherwood

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <div class="input-group br"> <span class="input-group-btn">
            <div class="btn-group">
                <a href="#" class="btn btn-primary clear-search">
                    <span class="glyphicon glyphicon-refresh"></span>

                </a> <a href="#" class="btn btn-primary qr-code">
                    <span class="glyphicon glyphicon-qrcode"></span>
                </a>

            </div>
            </span>
            <input class="form-control search" type="search" name="search" placeholder="Search"> <span class="input-group-btn">
            <div class="btn-group dropup">
                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <span class="glyphicon glyphicon-search"></span>
Search <span class="caret"></span>

            </button>
            <ul class="dropdown-menu dropdown-menu-right">
                <li><a class="buyer-identifier" href="#">Buyer Number</a>

                </li>...
                <li class="divider"></li>
                <li><a class="clear-search" href="#">Clear Search</a>

                </li>
            </ul>
        </div>
        </span>
    </div>
</div>

CSS

body {
    padding: 30px 0;
}