html - Bootstrap 最大列宽度

Question

我有三个列。中间一个包含一个十进制数，可以是这种格式:

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

所以点前可能有两到四个数字，点后总是有两个数字。

我的问题是，如果数字在小数点移动后的单一点之前多于两个数字。那么它与它下面的那个不在一条直线上。

这张截图说明了我的意思。

是否可以固定中间列的宽度以使统一对齐正确？幺正也可以右对齐吗？

这是我的代码的一部分:

<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>