在 Bootstrap 中使用 RTL CSS 保留内联表单输入的列顺序答案

【问题标题】：Preserving Column Order on Inline Form Inputs with RTL CSS in Bootstrap在 Bootstrap 中使用 RTL CSS 保留内联表单输入的列顺序
【发布时间】：2015-09-28 08:13:27
【问题描述】：

我的表单中有 3 列用于输入用户的电话：

<div class="col-md-5">
     <label class="control-label">Phone</label>
     <div class="row">
        <div class="col-md-4">
            <label for="phone_code" class="sr-only"><fmt:message key="phoneCode"/></label>
            <select class="form-control" name="phoneCode" id="phone_code">
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
        </div>
        <span class="col-md-2 text-center">-</span>
        <div class="col-md-6">
            <label for="phone_number" class="sr-only">phone number</label>
            <input type="tel" class="form-control" name="phoneNumber" id="phone_number" dir="LTR" value="${phoneNumber}">
        </div>
    </div>
</div>

http://www.bootply.com/jgFqaA4r6o

当我包含 rtl 的引导 css 时：

https://github.com/morteza/bootstrap-rtl

这会翻转列的顺序，这在大多数情况下是所需的结果。但是，我希望电话输入列保持相同的顺序（不变）。

在前两列中包含 pull-left 类可以解决问题，但在调整屏幕大小（特别是缩小）时会导致错误。我曾尝试使用/学习 col--pull-/col--push- 类，但我不知道如何让它们在这里工作。

有人有什么建议吗？如果也有改进，我也愿意改变总体布局。谢谢。

【问题讨论】：

标签： html twitter-bootstrap right-to-left

【解决方案1】：

我更改了 html 并使用了一个小“hack”来解决这个问题。那里可能还有更好的解决方案。这是我的html：

    <div class="col-md-5">
        <div class="col-sm-4 col-xs-12 pull-left">
            <label for="phone_code" class="control-label">phone code</label>
            <input type="text" class="form-control">
        </div>
        <div class="col-sm-8 col-xs-12">
            <label for="phone_number" class="control-label">phone number</label>
            <input type="tel" class="form-control">
        </div>
    </div>

http://www.bootply.com/tIW6xBHVGB

“hack”是添加到<div> 元素的“col-xs-12”类。如果未添加，则由于“pull-left”类，div 不会像应有的那样扩展以占据整行。

我愿意听取其他建议。

【讨论】：