如何用其他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？

回答

相关问题