2013-02-23 79 views
0

我曾經遇到過一個惱人的「問題」與我的網站,使用Twitter的引導。我有一個主容器使用默認的.container引導類,我已經在我的自定義CSS文件中給它一個特定的寬度。但是,當我將bootstrap-responsive.css文件包含到我的HTML文檔中時,它似乎覆蓋了我的容器的寬度。引導響應覆蓋我.container寬度

這是我的CSS文件的順序:

<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/> 
<link rel="stylesheet" type="text/css" href="/css/Site.css"/> 
<link rel="stylesheet" href="/css/bootstrap-responsive.css"/> 

對於有什麼理由在響應CSS文件中指定的寬度?有沒有一種平穩的方式來解決這個問題,而無需手動編輯bootstrap-responsive.css(我認爲這是一個壞主意)

我需要bootstrap-responsive.css以使我的網站移動/平板電腦友好。

回答

1

它是在自舉最小寬度是必要保持適當的結構。另一方面,你可以簡單地把你的CSS代碼AFTER bootstrap響應,所以你的規則將覆蓋引導程序的規則。

+0

true..I'm只是怕我會覆蓋超過我真的想如果我這樣做:S – msk 2013-02-23 10:30:37

+1

改變的site.css和引導,responsive.css的順序 – 2013-02-23 10:36:27

0

就個人而言,我更傾向於其他所有CSS文件後加載自己的自定義樣式表。但是,你必須確保不更改任何默認值全局屬性...或佈局相關的屬性,即:.container

一般情況下,這個類重複使用多次,可能被調整不同的設備和情況。因此,我建議在bootstrap-responsive.css中更改這些值。這是包含所有媒體查詢的文件。

否則你最終覆蓋所需的響應,並可能導致與CSS屬性!重要的例外。這應該通過一切手段避免。

0

當您使用CSS,一塊樣式信息的最後一個實例優先。例如,如果我鏈接到兩個不同的樣式表,第二個會,如果有衝突優先......

<link rel="stylesheet" type="text/css" href="bootstrap.css" /> 
<link rel="stylesheet" type="text/css" href="bootstrap-responsive.css" /> 
<link rel="stylesheet" type="text/css" href="style.css" /> 

在這個例子中,如果.container元素是在style.css文件的變化, style.css中的樣式數據僅在存在衝突時纔會優先。這種效果與在單個HTML文檔中使用外部和內聯CSS類似。 Here is a jsFiddle來說明。在這裏,您會看到內聯樣式優先,並使文本的顏色變爲橙色,同時保持背景爲黑色。