如何用其他css覆蓋bootstrap css？

我是bootstrap全新的。我正在嘗試使一個網站（http://riteceramic.com）響應而不改變其外觀和感覺。我將「nav nav-justified」類的引導程序應用於我的菜單部分。但我也想將「sf-menu」類應用到其他樣式表的相同菜單，即包含以下代碼的「style.css」。但它沒有正常工作。如何用其他css覆蓋bootstrap css？

.sf-menu{ 
min-height:28px; 
padding:0; 
margin:0; 
font-size:0; 
line-height:0;} 

.sf-menu ul{ 
position:absolute; 
top:-999em; 
width:190px; 
left:0; 
display:none; 
background:#fff; 
text-align:center; 
padding:10px 0; 
box-shadow:0 0 2px #ccc;} 

.sf-menu > li{ 
position:relative; 
display:inline-block; 
margin:0 31px;} 

.sf-menu > li > a { 
text-decoration:none; 
display:block; 
font-family: 'Copperplate Gothic'; 
font-size:18px; 
font-weight:bold; 
line-height:22px; 
text-transform:capitalize; 
text-decoration:none; 
color:#454545; 
padding:0; 
text-shadow:1px 1px #fbfbfb;} 

.sf-menu > li.current > a, .sf-menu > li:hover > a, .sf-menu > li.sfHover > a { 
    color:#ff9933;  text-decoration:none; } 

    .sf-menu li:hover ul,.sf-menu li.sfHover ul{top:35px; left:-55px; z-index:999;} 
.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul{top:-999em} 

.sf-menu li.current,.sf-menu li:hover,.sf-menu li.sfHover{ 
text-decoration:none;} 

.sf-menu li li a{ 
display:block; 
margin:0; 
position:relative; 
text-decoration:none; 
font-size:14px; 
line-height:18px; 
color:#454545; 
overflow:hidden; 
padding:8px 5px 8px 5px; 
text-transform:lowercase; 
font-family: 'Open Sans', sans-serif;} 

.sf-menu li li > a:hover, .sf-menu li li.sfHover > a, .sf-menu li li.current > a{ 
text-decoration:underline;} 
.sf-menu li li li a { background:url(../images/header-bg.png);} 

.sf-menu li li{ 
float:none; 
position:relative; 
margin:0 0 1px 0;} 
.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul{left:181px;top:-10px;}

你能幫我嗎..謝謝！

來源

2015-02-06 Kishor Rajendra Kulkarni

包括包括自舉樣式表在此之後的style.css。 但最重要的是將自己的樣式表包含在引導樣式表之後。

來源

2015-02-06 07:34:27

小心使用！重要。使用CSS特性覆蓋Bootstrap樣式會更好。 – ZimSystem 2015-02-06 09:29:51

你不能重寫bootstrap！重要的風格而不使用！重要的skelly – 2015-02-06 09:33:47

很少的Bootstrap類使用！很重要。 '！important'只在引導程序中用於打印介質和實用程序浮動，如「左拉」和「右拉」。大多數樣式可以使用'！important'簡單地重寫。這不是一個最佳實踐，只是說「如果引導程序樣式使用！對於特定的類很重要，在樣式中也使用重要的」__ http://stackoverflow.com/questions/8360190/is-it-bad-to-use- important-in-css-property – ZimSystem 2015-02-06 09:41:39

如果這種風格被鏈接到正確的頭，你可以運行通過添加邊框一個簡單的測試：1px的固體紅;到其中一個CSS屬性。我也會檢查路徑。你可以在這裏發佈嗎？

來源

2015-02-06 08:13:41 Denise

如何用其他css覆蓋bootstrap css？

回答

相關問題