2013-10-31 68 views
0

將Bootstrap 3安裝到我的Rails應用程序後,文本字段的高度收縮並且一些定位變得很糟糕。除了手動將文件添加到供應商/樣式表文件夾以外,我還沒有對引導文件進行任何更改。我也看過文檔類型,因爲我已經看到其他人提到這可能是問題,但一切看起來都正確。有沒有人在添加bootstrap 3後遇到過這個問題?在導軌上安裝引導程序3之後Textfield高度問題

要安裝引導3我跟着這個線程:Link

我application.html.erb有<!DOCTYPE html>

,這裏是我的應用程序的外觀與引導3: Bootstrap 3

這裏是它應該看起來如何(與以前版本的引導): Bootstrap

請注意,我可以通過添加\從我的application.css.scss文件中刪除*= require bootstrap 來觸發此操作。

任何人都可以幫助我嗎?

+0

路易斯,是從風格來引導?這似乎是一個合乎邏輯的來源。爲什麼你不能在樣式表中覆蓋它? – screenmutt

+0

另外,我們需要示例。 – screenmutt

+0

是的,風格來自bootstrap。因爲我不知道問題來自哪裏,因此很難給出示例,因爲除了將引導程序3文件添加到供應商文件夾之外,我沒有覆蓋任何內容。我以前的bootstrap版本工作完美,我遵循上述鏈接中的步驟,觸發bootstrap 3的工作是將'* = require bootstrap'添加到我的application.css.scss文件中。之後,一些formfields和定位堅果。 –

回答

0

當您從Bootstrap 2遷移到3時,請務必檢查您的所有格式屬性。對於文本字段高度,<input type='text'>用於工作,但現在您需要<input type='text' class='form-control'>

對於此答案的其他讀者,無論何時安裝Bootstrap,都要確保將相應的類屬性添加到視圖中的HTML標記。否則,它可能看起來像事縮水。例如,

Welcome, visitor! What is your name? 
<%= text_field_tag 'name' > 

應該成爲

Welcome, visitor! What is your name? 
<%= text_field_tag 'name', nil, class: 'form-control' > 

注意,在Rails中,你可以通過class: 'your-class-here'

引導指定類使用表單助手錶單元素,通過設置類屬性無處不在的工作原理。請參閱下列文件:

http://getbootstrap.com/css(引導文件)

http://getbootstrap.com/css/#forms-control-sizes(縮放文本字段)

+0

這是否回答你的問題,路易斯?如果是這樣,請接受它。謝謝! – earksiinni

+0

謝謝@earksiinni!但是它並沒有解決問題,因爲我完全按照你所提到的那樣做了,班級中的每種風格都很好,它只是表面字段的高度縮小了一些未知的原因。請參閱上面的圖片。再次感謝 –