移动视图上的水平窗体

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中输入了该标签。全部在同一行内。最后根据需要调整利润率。

注意：这适用于独家移动UX。