Twitter Bootstrap et ReCaptcha

J'utilise les fichiers Twitter Bootstrap de base comme le style de base d'un site Web ASP.NET MVC4. J'ai ajouté un ReCaptcha à une page d'inscription, en utilisant la classe Microsoft.Web.Helpers.ReCaptcha. Exemple simplifié:Twitter Bootstrap et ReCaptcha

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

@ReCaptcha.GetHtml()

Le résultat ressemble à ceci:

jumbled ReCaptcha

Si je vais avec les outils de dev Chrome ou Firebug et supprimer le bootstrap twitter moins, je reçois le ReCaptcha attendu:

good ReCaptcha

Bien sûr, ce Nukes tous les autres style du site, ce qui est souhaitable. Quelqu'un d'autre a-t-il expérimenté cela, et existe-t-il des solutions, à moins de changer manuellement les classes bootstrap pour ajouter des exceptions pour les classes ReCaptcha?

Source

2012-10-17 EricRRichards

Si vous publiez une version que d'autres pourraient jouer, ce serait utile pour vous fournir une réponse plus précise. Sinon, la réponse générique est, vous devez ajouter des sélecteurs étroits à votre CSS (pas à Bootstrap) qui écrasent tout ce que Bootstrap pourrait appliquer pour le faire dérailler. – merv

Je l'ai pensé à elle maintenant ... Dans le fichier .Moins personnalisé pour notre site, nous avions ajouté la règle suivante à tous les éléments de table pour fixer la mise en page sur un élément de table différent:

table th, table td { overflow: hidden; }

Ajout d'une autre règle spécifique au ReCaptcha HTML généré a résolu le problème pour nous:

#recaptcha_table{ table-layout: auto; }

Source

2012-10-18 13:41:21 EricRRichards

C'est ce qu'il fixe pour moi. Utilisation de Bootstrap 2.3.2 dans une application web MVC 4. J'ai ajouté les css suivants après tous les autres CSS.

.recaptchatable * { 
    border: 0 !important; 
} 

body { 
    line-height: normal !important; 
}

Source

2013-06-12 21:12:39 meffect

J'aime la réponse de meffect ici mais comme j'utilise des fichiers CSS scriptées qui change mes mises en page dans d'autres bootstrap. Faire un léger changement et le déplacement de la propriété à l'intérieur line-height.recaptchatable résolu pour moi:

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

mai aider quelqu'un.

Source

2013-07-14 16:21:59 chris

cela a fonctionné pour moi

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

    input{ 
     line-height: initial; 
     height: auto; 
    } 
}

Source

2014-07-05 13:40:15

Twitter Bootstrap et ReCaptcha

Répondre

Questions connexes