如何修复响应式表单布局

Question

我正在构建这个表单：http://codepen.io/anon/pen/gFoIG/

到目前为止，我很满意。不幸的是，我遇到了一些我似乎无法解决的问题。

首先，我想在它们各自的输入旁边强制执行标签位置。现在表单很容易崩溃（使用智能手机和平板电脑的 Opera 模拟器，隐私标签位于支票下方，但我希望它留在旁边）

我遇到的另一个问题是我希望它在有小屏幕时优雅地回退，例如将第二个图像放在第一个图像下方，并将输入控件放在另一个下方，并使全屏宽度更大并且更易于交互，但到目前为止，我只能通过测试打破布局。

此问题：表单布局中断，内部控件（输入、按钮等）超出容器 div。我如何强制容器将所有东西都放在里面？我已经尝试过块、浮动等，但如果布局中断，输入框通常会超出灰色矩形。

最后一个问题：如果我将此表单插入现有网站（例如，wordpress 中的页面），则布局会因为主题样式的影响而被完全破坏。如何在表单上强制执行我的样式，使其与其他样式隔离？我可以将 iframe 视为一种解决方案，但它是唯一的吗？这是个好习惯吗？

有人可以帮我吗？

Answer 1

您可能想看看here。它是我刚刚建立的一个站点，用于解释使用 jQuery 插件管理重做布局的响应方法。我认为它可以很容易地适用于您的示例。此外，因为它可以定位网页中任何深度的容器 div，所以在您想要重排的布局位于 3rd 方容器内的情况下（只要您可以在页面上运行脚本），它可能会有所帮助。