Горизонтальная форма на мобильном телефоне

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.