Question

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

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

因此在点之前可能有两到四个数字，并且在点之后总是有两个数字。

我的问题是，如果数字超过两个数字，那么十进制数后的单位数会发生变化。然后它不与它下面的那个对齐。

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

是否可以修复中间色列宽度以使单一对齐正确？单一性也可以对齐吗？

这是我的代码的一部分：

＆＃13;

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

＆＃13;

Answer 1

如果我理解您的问题，只需在您的值列

中添加text-right类

＆＃13;

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

＆＃13;

Bootstrap最大col宽度

1 个答案: