0

所以我正在创建一个 Rails 应用程序注册页面。我使用了 Zurb Foundation 网格来创建站点布局。我遇到的问题是，当网格调整大小时，recaptcha 并没有做同样的事情，并且开始超出它的界限。除了编辑 javascript 之外，似乎没有办法重新设计布局。有人知道验证码和导轨的良好响应式设计解决方案吗？

4

3 回答 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 回答