移动视图上的水平形式

Question

我正在尝试绘制一个水平形状，即使在移动视图中也应该是水平的 目前我有这个简单的形式：

<form role="form" class="form-horizontal">
   <div class="form-group">
     <label class="col-sm-2 control-label" for="username">{{_USERNAME}}:</label>
     <div class="col-sm-10">
       <input type="text" readonly class="form-control" id="username" value="{{username}}">
     </div>
   </div>
</form>

它按预期正常工作，因此在大屏幕上是水平的，在小屏幕上是经典的。

电流：

预期

：

即使在小屏幕上，如何强制此表格水平？我是否必须自己编写CSS或使用Bootstrap有一些标准方法？

Answer 1

好的，我找到了解决方案 使用 col-xs-* 代替 col-ms-*

<form role="form" class="form-horizontal">
   <div class="form-group">
     <label class="col-xs-2 control-label" for="username">{{_USERNAME}}:</label>
     <div class="col-xs-10">
       <input type="text" readonly class="form-control" id="username" value="{{username}}">
     </div>
   </div>
</form>

Answer 2

由于上述不符合我的需要。我绘制了一个表格并将标签插入到td中，输入插入到下一个td中。都在同一行。最后根据需要调整了边距。

注意：这适用于独家移动用户体验。