所以我正在创建一个 Rails 应用程序注册页面。我使用了 Zurb Foundation 网格来创建站点布局。我遇到的问题是,当网格调整大小时,recaptcha 并没有做同样的事情,并且开始超出它的界限。除了编辑 javascript 之外,似乎没有办法重新设计布局。有人知道验证码和导轨的良好响应式设计解决方案吗?
问问题
3840 次
3 回答
1
您可以自定义 reCaptcha 的外观:
无需修改Javascript;应用响应式 CSS/HTML 来处理布局的其余部分。
于 2012-07-28T01:00:31.513 回答
0
用css制作
@media (max-width: 444px) {
.recaptchatable #recaptcha_image {
margin: 0 auto !important;
width: 200px !important;
}
.recaptchatable .recaptcha_r1_c1, .recaptchatable .recaptcha_r3_c1, .recaptchatable .recaptcha_r3_c2, .recaptchatable .recaptcha_r7_c1, .recaptchatable .recaptcha_r8_c1, .recaptchatable .recaptcha_r3_c3, .recaptchatable .recaptcha_r2_c1, .recaptchatable .recaptcha_r4_c1, .recaptchatable .recaptcha_r4_c2, .recaptchatable .recaptcha_r4_c4, .recaptchatable .recaptcha_image_cell {
background: none !important;
}
}
或者
.recaptchatable #recaptcha_image {
width: 30em !important;
}
#recaptcha_image {
display: block;
margin: 0 auto !important;
}
.recaptchatable .recaptcha_r1_c1,
.recaptchatable .recaptcha_r2_c1,
.recaptchatable .recaptcha_r2_c2,
.recaptchatable .recaptcha_r3_c1,
.recaptchatable .recaptcha_r3_c2,
.recaptchatable .recaptcha_r3_c3,
.recaptchatable .recaptcha_r4_c1,
.recaptchatable .recaptcha_r4_c2,
.recaptchatable .recaptcha_r4_c4,
.recaptchatable .recaptcha_r7_c1,
.recaptchatable .recaptcha_r8_c1 {
background: none !important;
}
.recaptcha_only_if_privacy,
.recaptchatable td img,
#recaptcha_reload,
#recaptcha_switch_audio,
#recaptcha_switch_img,
#recaptcha_whatsthis {
display:none;
}
于 2014-02-18T11:01:31.377 回答
0
如果您不想使用自定义主题,这将有所帮助。
@media (max-width: 444px) {
.recaptchatable #recaptcha_image {
margin: 0 !important;
width: 200px !important;
float:left !important;
}
.recaptchatable #recaptcha_image img {
max-width:100%;
}
.recaptchatable .recaptcha_r1_c1, .recaptchatable .recaptcha_r3_c1, .recaptchatable .recaptcha_r3_c2, .recaptchatable .recaptcha_r7_c1, .recaptchatable .recaptcha_r8_c1, .recaptchatable .recaptcha_r3_c3, .recaptchatable .recaptcha_r2_c1, .recaptchatable .recaptcha_r4_c1, .recaptchatable .recaptcha_r4_c2, .recaptchatable .recaptcha_r4_c4, .recaptchatable .recaptcha_image_cell, .recaptchatable .recaptcha_r2_c2 {
background: none !important;
}
}
于 2014-04-18T18:39:30.997 回答