Question

我尝试按照以下链接。

http://www.pardot.com/faqs/html-css/optimizing-forms-on-mobile-devices/

它说我可以在布局模板下使用我的Twitter Boostrap CSS / LESS样式表中的相同CSS3媒体查询到Pardot的表单样式表。

但是当我尝试在布局模板中编写此媒体查询时。

@media (max-width: 480px) {
// some CSS code here from Boostrap
}

然后在我的浏览器上查看它。它没有用！

由于其Pardot的内部iframe设置，当浏览器在移动设备上重新调整时，它似乎无法检测到我的Bootstrap CSS3样式表。

有人可以指出，移动响应可以通过这种集成来完成吗？

Answer 1

您需要在Pardot表单布局模板中包含指向您的Bootstrap样式表的链接。

添加https://github.com/davidjbradshaw/iframe-resizer以使您的iframe具有响应能力，并自动垂直调整大小，当您遇到表单错误或高度增长或缩小的表单以确认或条件字段时，这非常有用。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8"/>
            <meta name="description" content="%%description%%"/>
            <title>%%title%%</title>

            <link rel="stylesheet" href="https://yourdomain.com/media/styles/bootstrap.min.css">

        </head>
        <body>
            %%content%%

            <!-- Use iframe resizer to allow this form to resize itself in the parent page -->
<script src="https://yourdomain.com/media/scripts/iframeResizer.contentWindow.min.js"></script>
        </body>
    </html>

Answer 2

绝对。只需在头标记结束前添加https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css，然后将col-sm-6添加到2列或col-sm-4添加3列布局。工作得很漂亮。如果需要向提交按钮添加类，只需转到布局模板并打开表单选项卡。你可以在那里添加课程。

有没有人使用Pardot表单集成到Twitter Bootstrap？

2 个答案: