Question

我想在桌面上创建一个具有以下布局的表单：

Label1  Label2  Label3
input1  input2  input3

Label4  Label5  Label6
input4  input5  input6

在移动设备上，我希望它使用以下布局进行渲染：

Label1
input1
Label2
input2
...

我正在使用bootstrap，但没有成功。在这里，我的小提琴：https://jsfiddle.net/8t8u9aqy/

Answer 1

这将在中型设备上显示3列，并在手机上折叠为一列。

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

Answer 2

将此引导程序表单布局与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>

带有bootstrap的响应式表单

2 个答案: