Отзывчивые формы с начальной загрузкой

-2

Я хочу, чтобы создать форму с помощью следующего размещения на рабочих столах:Отзывчивые формы с начальной загрузкой

Label1 Label2 Label3 
input1 input2 input3 

Label4 Label5 Label6 
input4 input5 input6

на мобильные устройства, я хочу это сделать с следующей планировкой:

Label1 
input1 
Label2 
input2 
...

Я используя bootstrap, но без успеха. Вот моя скрипка: https://jsfiddle.net/8t8u9aqy/

источник

2017-01-04 CiroRa

добавить HTML здесь или настроить скрипку –

Вы можете обратиться к Bootstrap «инлайн формы» документация: http://getbootstrap.com/ css/# forms-inline – lddz

Посмотрите это перо: http://codepen.io/anon/pen/JEojWX (измените размер вашего окна) – lddz

Это отображает 3 колонки на средних устройствах и сворачивается до одной колонки на мобильных телефонах.

<form> 
... 
<div class='row'> 
    <div class='col-md-4 col-sm-12'> 
     ...form element... 
    </div> 
    ...Repeat for all form elements... 
</div> 
... 
</form>

источник

2017-01-04 16:45:30

Я пробовал, но в своей скрипке я не получаю то, что хочу – CiroRa

Используйте эту форму начальной загрузки макет с resposive

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 
    <form> 
    <div class="col-sm-12 col-xs-12"> 
    <div class="col-sm-4 col-xs-12"> 
    <div class="form-group"> 
     <label for="text">text1:</label> 
     <input type="text" class="form-control" id="text1" placeholder="Enter text1"> 
    </div> 
    </div> 
    <div class="col-sm-4 col-xs-12"> 
    <div class="form-group"> 
     <label for="text">text2:</label> 
     <input type="text" class="form-control" id="text2" placeholder="Enter text2"> 
    </div> 
    </div> 
    <div class="col-sm-4 col-xs-12"> 
    <div class="form-group"> 
     <label for="text">text3:</label> 
     <input type="text" class="form-control" id="text3" placeholder="Enter text3"> 
    </div> 
    </div> 
    <div class="col-sm-4 col-xs-12"> 
    <div class="form-group"> 
     <label for="text">text4:</label> 
     <input type="text" class="form-control" id="text4" placeholder="Enter text4"> 
    </div> 
    </div> 
    <div class="col-sm-4 col-xs-12"> 
    <div class="form-group"> 
     <label for="text">text5:</label> 
     <input type="text" class="form-control" id="text5" placeholder="Enter text5"> 
    </div> 
    </div> 
    <div class="col-sm-4 col-xs-12"> 
    <div class="form-group"> 
     <label for="text">text6:</label> 
     <input type="text" class="form-control" id="text6" placeholder="Enter text6"> 
    </div> 
    </div> 
    </div> 
    </form> 
</div> 

</body> 
</html>

источник

2017-01-04 16:59:22

Отзывчивые формы с начальной загрузкой

ответ

Смежные вопросы