移動視圖上的水平窗體

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。