Bootstrap 最大列宽

West 发表于 Dev

西

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

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

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

我的问题是，如果十进制数移位后的幺正点数之前的数字多于两个。那么它就没有与它下面的对齐。

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

是否可以修复中间的 col 宽度，以便统一对齐是正确的？幺正也可以对齐吗？

这是我的代码的一部分：

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

布万

如果我正确理解您的问题，只需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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。