2012-10-17 56 views
2

我使用基本的Twitter Bootstrap .less文件作为ASP.NET MVC4网站的基础样式。我已经使用Microsoft.Web.Helpers.ReCaptcha类将ReCaptcha添加到注册页面。简单的例子:Twitter Bootstrap和ReCaptcha

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

@ReCaptcha.GetHtml() 

结果看起来是这样的:

jumbled ReCaptcha

如果我去与Chrome浏览器开发工具或萤火并删除Twitter的引导少,我得到了预期验证码:

good ReCaptcha

当然,这种核弹的网站,这是不可取的所有其他造型。是否有其他人经历过这种情况,并且是否有解决方案,缺少手动更改引导类以添加ReCaptcha类的异常?

+0

如果你发布一个版本,其他人可以一起玩,这将是在为您提供更具体的答案有帮助。否则,通用的答案是,你需要添加一些狭窄的选择器到您的CSS(而不是Bootstrap),它会覆盖Bootstrap可能会导致它失控的任何东西。 – merv

回答

0

我已经想通了,现在......在我们的网站自定义.LESS文件,我们已经增加了以下规则应用于所有表元素来解决不同的表元素的布局:

table th, table td { overflow: hidden; } 

添加到特定和ReCaptcha另一个规则生成的html解决了这个问题对我们来说:

#recaptcha_table{ table-layout: auto; } 
8

这是固定的对我来说。在MVC 4 Web应用程序中使用Bootstrap 2.3.2。我在所有其他CSS之后添加了以下css。

.recaptchatable * { 
    border: 0 !important; 
} 

body { 
    line-height: normal !important; 
} 
4

我喜欢meffect的答案在这里,但为我用,改变我的其他布局中的引导脚本css文件。制作一个轻微的变化,移动内部.recaptchatableline-height物业解决了这个问题对我来说:

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

可以帮助别人。

0

这个工作对我来说

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

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