HTML Bootstrap grid columns not aligning

Question

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/

Answer 1

Try this:

 .input-group { width:100%; } 

 <div class="table-responsive"> <nav class="navbar navbar-default" ng-if="filterOn"> <form class="navbar-form"> <div class="col-sm-4 col-xs-12"> <span class="input-group"> <span class="input-group-addon" style="width: 20%">Filter: </span> <input class="form-control" ng-model="filterOptions.filterText" /> </span> </div> <div class="col-sm-4 col-xs-12"> <span class="input-group"> <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> </div> <div class="col-sm-4 col-xs-12"> <span class="input-group"> <span class="input-group-addon" style="width: 20%">Filter B: </span> <select class="form-control" name="mySelect2" ng-model="nameVarTo"> <option></option> <option>selections2</option> </select> </span> </div> </form> </nav> </div> 

Answer 2

  
 
  
  
  
 
   
 
    
   

     .input-group.col-xs-4.col-md-4 {
        float: left;
        padding: 5px;
    }
 
    
   <div class="table-responsive">
    <nav ng-if="filterOn" class="navbar navbar-default">
        <form class="navbar-form">
 <div class="show-grid">
            <span class="input-group col-xs-4 col-md-4"> <span class="input-group-addon">Filter: </span>

                <input ng-model="filterOptions.filterText" class="form-control">
            </span>
            <span class="input-group col-xs-4 col-md-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-xs-4 col-md-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>
  </div>
        </form>
    </nav>
</div>
 
   
 
  

Answer 3

You have to wrap your code with .container or .container-fluid and .row classes. Check this http://jsfiddle.net/manishrane1/u1wffrd4/2/

<div class="container">
<div class="row">
    <div class="table-responsive">
    <nav class="navbar navbar-default" ng-if="filterOn">
        <form class="navbar-form">
            <div class="col-xs-4"><span class="input-group"> <span class="input-group-addon">Filter: </span>

                <input class="form-control" ng-model="filterOptions.filterText" />
            </span></div>
            <div class="col-xs-4"><span class="input-group"> <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></div>
            <div class="col-xs-4"><span class="input-group"> <span class="input-group-addon">Filter B: </span>

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