Wie können die Bootstrap-Spaltenklassen so angepasst werden, dass alle Span-Tags 12 nicht überschreiten?

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>

Wie kann ich die Bootstrap Spalte Klassen einstellen, so dass die Summe für alle span-Tags nicht mehr als 12 nicht überschreitet mit diesem Beispiel oben?

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> 

Die Summe der Spalten nicht 12, so kann man es so etwas zu machen überschreiten 12.