麻煩重寫引導CSS

我已經搜查了淨一種方式來覆蓋白手起家CSS，但尚未有它爲我工作。我試圖更改默認navbar顏色，而無需編輯bootstrap.css文件。
我試圖把在頭下面裝bootstrap.css後：麻煩重寫引導CSS

.navbar-inner { 
    background-color: #006633; 
    background-image: -mox-linear-gradient(top, #006633, #006633); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#006633)); 
    background-image: -webkit-linear-gradient(top, #006633, #006633); 
    background-image: -o-linear-gradient(top, #006633, #006633); 
    background-image: linear-gradient(to bottom, #006633, #006633); 
    border-color: #006633; 
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff006633', endColorstr='#ff006633', GradientType=0); 
}

這沒有工作，所以我試圖把它放在自己的CSS文件，然後加載一個樣式像這樣：

bootstrapOverload的.css

.navbar-inner { 
    background-color: #006633; 
    background-image: -mox-linear-gradient(top, #006633, #006633); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#006633)); 
    background-image: -webkit-linear-gradient(top, #006633, #006633); 
    background-image: -o-linear-gradient(top, #006633, #006633); 
    background-image: linear-gradient(to bottom, #006633, #006633); 
    border-color: #006633; 
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff006633', endColorstr='#ff006633', GradientType=0); 
}

_Layout.cshtml

<link rel="stylesheet" href="Content/bootstrap.css"> 
<link rel="stylesheet" href="Content/bootstrapOverload.css">

如果沒有工作，我嘗試添加自定義的類元素

_Layout.cshtml

<div class="navbar-inner navbar-override"> <!-- added navbar-override -->

bootstrapOverload.css

.navbar-override { 
    background-color: #006633; 
    background-image: -mox-linear-gradient(top, #006633, #006633); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#006633)); 
    background-image: -webkit-linear-gradient(top, #006633, #006633); 
    background-image: -o-linear-gradient(top, #006633, #006633); 
    background-image: linear-gradient(to bottom, #006633, #006633); 
    border-color: #006633; 
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff006633',  endColorstr='#ff006633', GradientType=0); 
}

上午我做錯了什麼？如果可能的話，我會很樂意學習如何以正確的方式做到這一點。

來源

2012-09-29 Jeff

除了這個鏈接下面的答案http://www.nzwhost.com/article/understanding-css-hierarchy可能有幫助 –

這與[在twitter bootstrap 2 0 4中更改導航欄顏色]非常相似（http://stackoverflow.com/questions/11196638/change-navbar-color-in-twitter-bootstrap- 2-0-4），它有一個非常全面的解決方案。 – everette

過載，你需要或者是在後面的代碼CSS，或者更具體的，那麼你正在嘗試的CSS超載。

，這樣它指出body .navbar-inner只是使其更具體，也許div.navbar-inner它可能只是在.navbar-inner前面加body，最好是有一個id有什麼地方。

如果您選擇它作爲具體的是在bootstrap.css，那麼我認爲你的CSS，你認爲是不是引導加載後。使用Chromes開發工具或Firefox的螢火蟲等工具驗證所選內容。

來源

2012-09-29 23:29:22 Krycke

在這種情況下，不需要添加不必要的選擇器 –

我只是糾正了一些錯誤，並嘗試添加body，div和一個id，但它仍然不起作用。我還刪除了緩存，因爲我不知道是否由於某種原因阻止了我看到結果。當我用Chrome檢查元素時，它說它仍在使用bootstrap.css，但是當我取消選中所有值時，它會顯示我的樣式表中的顏色。我的代碼中放置了bootstrap.css之後的樣式表。 – Jeff

'bootstrap.css'用於元素的選擇器是什麼？ – Krycke

。在你的CSS一個錯字：

background-image: -mox-linear-gradient(top, #006633, #006633);

我覺得應該是：

background-image: -moz-linear-gradient(top, #006633, #006633);

如果您鍵入CSS一個錯誤，它停止解釋的休息，所以不佔優您。

來源

2012-09-29 23:29:42 Mark

太棒了。我不知道它在一次錯誤後停止渲染。可以肯定的是，這一次我把它從bootstrap.css複製到我自己的樣式表中，並更改了顏色值。遺憾的是仍然沒有運氣 – Jeff

剛用了大半天試圖改變導航欄的顏色：[

我認爲這個問題是.navbar逆

你獨立.css文件應該包括這樣的事，則顏色會改變：

.navbar-inverse .navbar-inner { 
background-color: #586214; 
background-image: none; 
}

來源

2013-03-16 06:12:28

您可以通過更改LESS變量來覆蓋引導默認值。

http://bootstrap.lesscss.ru/less.html

//導航欄

@navbarBackground：@ COLOR1;
@navbarBackgroundHighlight：@ Color1;
@navbarBrandColor：#FFFFFF;
@navbarLinkColor：#FFFFFF;
@navbarLinkColorHover：#FFFFFF;
@navbarLinkColorActive：#FFFFFF;
@navbarInverseBackground：#FFFFFF;
@navbarInverseBackgroundHighlight：#FFFFFF;
@navbarInverseBorder：#FFFFFF;
@navbarInverseLinkColorHover：@ Color7;
@navbarInverseLinkColorActive：@ Color11;
@navbarInverseLinkColor：@ Color1;

來源

2013-08-18 15:44:51 actraub

我們還應該補充說，在更改較少的文件後，必須重新編譯css（或由lessjs解釋） – Mangiucugna

您是否嘗試過在每個CSS行上添加!important標記以告知元素覆蓋bootstrap？

事情是這樣的：

.navbar-override { 
    background-color: #006633 !important; 
    background-image: -moz-linear-gradient(top, #006633, #006633) !important; 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#006633), to(#006633)) !important; 
    background-image: -webkit-linear-gradient(top, #006633, #006633) !important; 
    background-image: -o-linear-gradient(top, #006633, #006633) !important; 
    background-image: linear-gradient(to bottom, #006633, #006633) !important; 
    border-color: #006633 !important; 
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff006633',  endColorstr='#ff006633', GradientType=0) !important; 
}

通常不是最好的方式做到這一點，但我認爲它應該工作。

來源

2013-08-18 16:02:51 MitulP91

通過複製CSS-Class並重命名解決您的問題。然後使用這個類:)

我知道它的帶動下，但看起來ATLEAST它的工作原理

例子：

.drop-down {...}  /* is from bootstrap */ 
.drop-down-new {...} /* Your new Class that works*/

來源

2018-02-15 10:44:10 Dxg125

麻煩重寫引導CSS

回答

相關問題