如何调整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>

如何调整Bootstrap列类，以便上面的示例所有span标记的总数不超过12？

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> 

列的总和不应超过12，所以你可以使用这样的东西来使它成为12。