Bootstrap и форма для мобильных и планшетов

[z3r9]

Здравствуйте. Проблема с версткой формы в Bottstrap. Хочу сделать 2 поля в одну линию с выбором промежутка ОТ и ДО. Но при уменьшении размера экрана до планшета, название поля не правильно отображается. Пробовал различные размеры col-md-* col-xs-* и тд. подставлять но не помогло. Подскажите как сделать. 

Получается вот так:
  

 

Код такой:

<form method="GET" action="#" accept-charset="UTF-8" class="form-horizontal">
        <fieldset>            

            <!-- Text input-->
            <div class="form-group">
                <label for="name" class="col-md-4 control-label">Имя</label>
                <div class="col-md-4">
                    <input class="form-control input-md" name="name" type="text" id="name">
                </div>
            </div>

            <div class="form-group">

                <label for="position_from" class="col-md-4 col-xs-12 control-label">Выбор от и до</label>

                <div class="col-md-2 col-xs-6">
                    <input class="form-control input-md" name="position_from" type="text" id="position_from">
                </div>
                <div class="col-md-2 col-xs-6">
                    <input class="form-control input-md" name="position_to" type="text">
                </div>
            </div>

            
            <!-- Button -->
            <div class="form-group">
                <label class="col-md-4 control-label" for="submit"></label>
                <div class="col-md-4">
                    <input class="btn btn-primary" name="submit" type="submit" value="Найти">
                </div>
            </div>

        </fieldset>
    </form>

Еще раз повторюсь, что пробовал использовать различные размеры col-md-*, col-xs-*, и тд, но у меня не получилось. Получается так под планшеты, под мобильники и полный экран нормально. 

Edited July 27, 2017 by z3r9

[Libiros]

А что именно неправильно? Как должно быть?

Закинул все в песочницу, подключив бутстрап: https://jsfiddle.net/1k9yr01g/

[Xandrito]

Нужно что-бы второй label был слева или что?

[z3r9]

В 31.07.2017 в 07:43, Xandrito сказал:

Нужно что-бы второй label был слева или что?

Да, на версии для планшетов label в правую сторону съезжает. А если его выровнять по левому, тогда на других версиях будет проблема. 

В 28.07.2017 в 07:46, Libiros сказал:

А что именно неправильно? Как должно быть?

Закинул все в песочницу, подключив бутстрап: https://jsfiddle.net/1k9yr01g/

А вы растяните окно до размера планшета, мобильного и обычного. label получается скачет и не знаю как решить. 

Типа вот так получается в разных версиях (для планшетов не правильно, 2 по счету):

Edited August 1, 2017 by z3r9

[Xandrito]

Уберите .control-label у лейбла

Тк .form-horizontal .control-label дает смещение текста в право, и так как длина лейбла у вас 12 колонок (col-md-12) текст уходит в конец строки ...

https://jsfiddle.net/3hg95tny/

[z3r9]

В 02.08.2017 в 03:17, Xandrito сказал:

Уберите .control-label у лейбла

Тк .form-horizontal .control-label дает смещение текста в право, и так как длина лейбла у вас 12 колонок (col-md-12) текст уходит в конец строки ...

https://jsfiddle.net/3hg95tny/

Только это выравнивание, оно нужно. В полной версии не будет выравнивания по правому краю текста. 

[Xandrito]

Я думал вам наоборот нужно что-бы текст всегда был слева )