2

ASP.NET MVC4 Webサイトの基本スタイルとして、基本的なTwitterBootstrap.lessファイルを使用しています。Microsoft.Web.Helpers.ReCaptchaクラスを使用して、登録ページにReCaptchaを追加しました。簡略化した例：

<head>
  <link rel="stylesheet/less" href="@Url.Content("~/scripts/less/style.less")" />
</head>

@ReCaptcha.GetHtml()

結果は次のようになります。

乱雑なReCaptcha

Chrome開発ツールまたはFirebugを使用して、Twitterブートストラップを削除する回数を減らすと、期待どおりのReCaptchaが得られます。

良いReCaptcha

もちろん、これはサイトの他のすべてのスタイリングを無効にしますが、これは望ましくありません。他の誰かがこれを経験しましたか？ReCaptchaクラスの例外を追加するためにブートストラップクラスを手動で変更する以外に解決策はありますか？

4

4 に答える 4

8

これが私のためにそれを修正したものです。MVC 4 Web アプリで Bootstrap 2.3.2 を使用する。他のすべての CSS の後に次の CSS を追加しました。

.recaptchatable * {
    border: 0 !important;
}

body {
    line-height: normal !important;
}
于 2013-06-12T21:12:39.167 に答える
4

ここでmeffectの答えが好きですが、ブートストラップで他のレイアウトを変更するスクリプト化された css ファイルを使用しているためです。わずかな変更を加えてline-heightプロパティを内部に移動すると、.recaptchatable解決しました：

.recaptchatable * {
    border: 0 !important;
    line-height: normal !important; }

誰かを助けるかもしれません。

于 2013-07-14T16:21:59.093 に答える
0

私は今それを理解しました...私たちのサイトのカスタム.lessファイルでは、別のテーブル要素のレイアウトを修正するために、すべてのテーブル要素に次のルールを追加しました:

table th, table td { overflow: hidden; }

ReCaptcha で生成された html に固有の別のルールを追加すると、問題が解決されました。

#recaptcha_table{ table-layout: auto; }
于 2012-10-18T13:41:21.987 に答える
0

これは私のために働いた

#recaptcha_widget_div{
     .recaptchatable img{
         max-width: auto;
     }

     input{
         line-height: initial;
         height: auto;
     }
 }
于 2014-07-05T13:40:15.090 に答える