如何调整Bootstrap列类，使所有span标签不超过12个？

Question

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <HeaderTemplate> <span class="col-xs-3">ID</span> <span class="col-xs-3">Product</span> <span class="col-xs-3"> Unit Price</span> <span class="col-xs-3">On Hand</span> <span class="col-xs-3">Total</span> </HeaderTemplate> 

How can I adjust the Bootstrap column classes so the total for all the span tags doesn't exceed 12 with this example above?

Answer 1

                        <span class="col-xs-2">ID</span>
                        <span class="col-xs-2">Product</span>
                        <span class="col-xs-2"> Unit Price</span>
                        <span class="col-xs-2">On Hand</span>
                        <span class="col-xs-4">Total</span> 

The sum of columns should not exceed 12 so you can to something like this to make it 12.