css - 如何调整 Bootstrap 列类，使所有跨度标签不超过 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。