在这个演示中，表单看起来还不错，但在Safari - 小屏幕（iphone）上的响应式设计模式下，表单崩溃得太过分了。
我试过像媒体查询这样的东西
/* Custom, iPhone Retina */
@media only screen and（min-width：320px）{
}
但是在这种情况下，它只是我想要控制的井/形式，所以我不确定在哪里应用像＃＆＃34; min width＆＃34;好吗？要么？
答案 0 :(得分：0)
存在基本的引导问题。首先你应该使用class =＆＃34; row＆＃34;在容器内部分隔每一行。
其次，您的表单位于应用类＆＃34; col-xs-4＆＃34;的div内部。与您的社交图标。这导致你的井崩溃太多了。如果你将它们分成不同的行，或者至少使用＆＃34; col-xs-4＆＃34;来关闭div，这应该可以解决你的问题。
在此处查看我的分页版本：http://codepen.io/egerrard/pen/xEYEgv。我所做的只是在下面的代码中用社交链接包装该部分。
<div class="row">
<div class="col-xs-4">
</div>
</div>
以下是Bootstrap文档的链接，其中讨论了行的使用：http://getbootstrap.com/css/#grid-intro