I'm trying to align filter boxes into a grid that spans 3 blocks per row... 

I didn't want to lose the bootstrap look so I haven't tried to strip out some of these navbar/input group classes. Is there a clean way to fix this? What approach should I take to troubleshooting stuff like this in the future? jsFiddle below

```
<nav class="navbar navbar-default" ng-if="filterOn">
<form class="navbar-form"> <span class="input-group col-sm-4"> <span class="input-group-addon">Filter: </span>

    <input class="form-control" ng-model="filterOptions.filterText" />
    </span> <span class="input-group col-sm-4"> <span class="input-group-addon" style="width: 20%">Filter A: </span>

    <select class="form-control" name="mySelect1" ng-model="sel1">
        <option></option>
        <option>{{selections}}</option>
    </select>
    </span> <span class="input-group col-sm-4"> <span class="input-group-addon">Filter B: </span>

    <select class="form-control" name="mySelect2" ng-model="nameVarTo">
        <option></option>
        <option>selections2</option>
    </select>
    </span>
</form>

```

<http://jsfiddle.net/u1wffrd4/1/>