Question

我的表单中有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包含bootstrap css时：

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

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

在前两列中包含左拉类可以解决问题，但在调整屏幕大小（特别是缩小）时会导致错误。我尝试过使用/学习col- -pull - / col- -push - 课程，但我无法弄清楚如何让它们在这里工作。< / p>

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

Answer 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”是添加到col-xs-12元素的“<div>”类。如果没有添加，则由于“pull-left”类，div不会展开以占据整个行。

我愿意听取其他建议。

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

1 个答案: