2012-10-17 58 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; 
    } 
}