【发布时间】：2016-08-21 22:02:39
【问题描述】：
我有一个复杂的 Web 表单，其中一行包含许多字段。 Bootstrap 内联表单在大屏幕上效果很好。但是，要求是使页面具有响应性，以便内联表单在平板电脑和手机等较小的屏幕上转换为 3 列网格布局。
大屏内联表单：
手机屏幕上的必需布局
有可能吗？这是针对 Bootstrap 3 的。
非常感谢任何提示！
代码片段：
<div class="container">
<form class="form-horizontal" data-toggle="validator" role="form" action="" method="post" id="form1">
<fieldset style="background-color:#F7F7F7">
<div class="row">
<div class="form-inline" style="text-align:left">
<div class="form-group" style="margin-right:30px;">
<div class="floating-label-form-group" style="top:-5px;width:180px">
<label class="control-label" for="Selection1">Selection1</label>
<select id="Selection1" name="Selection1" class="form-control relationship selectpicker" required>
<option value="" disabled selected>Selection1 *</option>
<option value="1">option 1</option>
<option value="2">option 2/option>
<option value="3">option 3</option>
</select>
</div>
<span class="help-block with-errors"></span>
</div>
<div class="form-group ">
<div class="floating-label-form-group">
<label class="control-label" for="fName">1st Name</label>
<input id="fName" name="fName" type="text" required>
</div>
<span class="help-block with-errors"></span>
</div>
<div class="form-group " style="margin-right:30px">
<div class="floating-label-form-group">
<label class="control-label" for="lName">Last Name</label>
<input id="lName" name="lName" type="text" required>
</div>
<span class="help-block with-errors"></span>
</div>
<div class="form-group">
<div class="floating-label-form-group" style="top:-5px;width:120px">
<label class="control-label" for="gender">Gender</label>
<select id="gender" name="gender" class="form-control selectpicker" required>
<option value="" disabled selected>gender *</option>
<option value="1">M</option>
<option value="2">F</option>
</select>
</div>
<span class="help-block with-errors"></span>
</div>
<div class="form-group">
<div class="floating-label-form-group" style="top:-5px;width:160px">
<label class="control-label" for="selection2">Selection2</label>
<select id="selection2" name="selection2" class="form-control selectpicker" required>
<option value="" disabled selected>Selection2 *</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
</div>
<span class="help-block with-errors"></span>
</div>
</div>
</div><!-- /row -->
</fieldset>
</form>
【问题讨论】：
-
我什么都试过了。 SO一直是最后的手段。我不是要求有人为我编码，为了记录。我相信其他一些人可能面临类似的情况。如果@Paulie_D 无法提供有关如何解决问题的任何提示，请不要回来投反对票。
-
只尝试显示顶部屏幕截图的内联表单布局，因此我故意模糊了文本。如果有人发现它令人困惑，我深表歉意。应该使用whiteout。是否必须给出代码 sn-p 才能理解问题？
-
相同的结果...我们不知道什么元素是什么，以及它们应该如何定位在之前/之后。这就是为什么我们要求您使用代码进行演示...这样我们就可以看到您进行更改时发生的情况。
-
添加了代码片段。谢谢你。屏幕截图将被编辑以反映代码。
-
你能分享你的 CSS 吗？您正在使用一些自定义类。
标签： jquery css twitter-bootstrap-3 responsive-design