2012-06-30 63 views
2

im使用與流星(fluid.html)自舉的例子。我已將自舉引導至最新的2.0.4。與流星自舉實例

但是我有與padding-top: 60px;一個奇怪的問題,以錯誤的方式與

@media (max-width: 979px) 
    body { 
    padding-top: 0; 
} 

衝突的和好.. WebKit的似乎要做到這一點(僅在流星出於某種原因):

enter image description here

它結束了看起來像這樣:

enter image description here

(即使世界在上面的黑條頂部的間隙) - 這樣的瀏覽器需要被拖累到小視圖當然,這是流體佈局(適用於iPhone /機器人會/片)

我將如何管理讓瀏覽器採取padding-top: 0作爲偏好,所以它不這樣做?或者,它爲什麼這樣做(文件在同一順序加載CSS - 第一bootstrap.css,然後bootstrap-responsive.css我想不通的區別

(它應該是這樣的:http://twitter.github.com/bootstrap/examples/fluid.html

+0

檢查'.navbar'的'navbar-fixed-top'類 – Sherbrow

+0

'div'有'navbar'和'navbar-fixed-top' – Akshat

+0

我幾乎用了精確的代碼作爲例子。它的流星在某種程度上干擾 – Akshat

回答

2

升級到2.0.4後,我仍然有問題,即以特定分辨率使用navbar-fixed-top內容時會得到隱藏。這在一定分辨率會發生什麼:

Content get hidden under navbar

調整的CSS後,我來到了,當添加到我的CSS文件的頂部,在所有分辨率下修復了下列文件:

@media (min-width: 979px) { body { padding-top: 60px; } } 

Padding adjusts properly with the proper media query

希望這將解決你的問題。

0

它。不只是這樣做......

它確實比這更多。你應該檢查什麼padding-top設爲相反,經過整個面板,看看是設置它,這應該告訴你在哪裏問題在於,在一個非常糟糕的情況下Ë你可以使用padding-top: 0 !important;但應該知道,!important是不好的建議,你應該能夠避開不必添加。

我沒有看到流星怎麼負責,因爲他們沒有任何重大的改變CSS添加據我所知道的;但它可能是有的,但你只能告訴你看看padding-top的設置。

+0

我想我已經找到了問題。 Meteor以與示例略有不同的方式排列樣式表的順序。它應該是 1)'bootstrap.css' 2)'' 3)'自舉responsive.css' 但CSS是在與流星一旦全部完成,所以我想我會必須進行手動修復。 – Akshat

+0

@Akshat:'style'標籤來自哪裏?如果你只是創建一個'.css',在引導後加載。但是,如果您不使用引導程序智能程序包,那麼你可以通過使用目錄將它們分開或者將文件名按照它們需要加載的順序按字母順序排列來排列樣式表的順序。訂單確實是一個小問題... –

+0

這些都是從示例中複製而來。它的填充是從哪裏來的。我會嘗試按字母順序加載。 – Akshat