Bootstrap最大列宽

Question

我有三个山口。 中间的一个包含一个十进制数字，可以采用以下格式：

XX.XX km
XXX.XX km
XXXX.XX km

因此，小数点前可能有2到4个数字，而小数点后总是有2个数字。

我的问题是，如果十进制数字移位后，该数字是否大于两个数字，则该点为the。 然后它与下一个不对齐。

此屏幕截图显示了我的意思。

是否可以固定中间的col宽度，以便整体对齐正确？ the也可以右对齐吗？

这是我的代码的一部分：

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="col-xs-6"> <div> <div class="row overall"> <div class="col-sm-12 reducedMarginRight reducedMarginLeft"> <h4 class="font">Overall</h4> <hr> </div> </div> <div class="row vcenter"> <div class="col-sm-3"> <span class="align-middle"> <i class="glyphicon glyphicon-road glyphSize"></i> </span> </div> <div class="col-sm-5"> <div class="values font align-middle" id="overall_distance"> </div> </div> <div class="col-sm-4"> <div class="values font text-right" id="distanceFormat"> km </div> </div> </div> <div class="row vcenter"> <div class="col-sm-3"> <span> <i class="glyphicon glyphicon-time glyphSize"></i> </span> </div> <div class="col-sm-5"> <div class="values font" id="overall_time"> </div> </div> <div class="col-sm-4"> <div class="values font text-right"> h </div> </div> </div> </div> </div> 

Answer 1

如果我正确理解了您的问题，只需在“值”列中添加text-right类

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-xs-6"> <div class="row overall"> <div class="col-xs-12 reducedMarginRight reducedMarginLeft"> <h4 class="font">Overall</h4> <hr> </div> </div> <div class="row vcenter"> <div class="col-xs-3"> <span class="align-middle"> <i class="glyphicon glyphicon-road glyphSize"></i> </span> </div> <div class="col-xs-5 text-right"> <div class="values font align-middle" id="overall_distance">690.05 </div> </div> <div class="col-xs-4"> <div class="values font text-right" id="distanceFormat"> km </div> </div> </div> <div class="row vcenter"> <div class="col-xs-3"> <span> <i class="glyphicon glyphicon-time glyphSize"></i> </span> </div> <div class="col-xs-5 text-right"> <div class="values font" id="overall_time">07:20 </div> </div> <div class="col-xs-4"> <div class="values font text-right"> h </div> </div> </div> </div> </div>