如何用其他 css 覆盖引导 css？答案

【问题标题】：How to override bootstrap css with other css?如何用其他 css 覆盖引导 css？
【发布时间】：2015-02-06 07:18:39
【问题描述】：

我是新手。我试图让一个网站 (http://riteceramic.com) 在不改变其外观和感觉的情况下做出响应。我将“nav nav-justified”类的引导程序应用到我的菜单部分。但我也想将“sf-menu”类应用于来自其他样式表的同一菜单，即包含以下代码的“style.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;}

你能帮帮我吗.. 非常感谢！！！

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3 responsive-design

【解决方案1】：

在包含引导样式表之后包含此 style.css。 但主要是在引导样式表之后包含您的样式表。

【讨论】：

小心使用!important。最好使用 CSS 特异性覆盖 Bootstrap 样式。
你不能在不使用 !important Skelly 的情况下覆盖引导 !important 样式
很少有 Bootstrap 类使用 !important。 !important 仅在 Bootstrap 中用于打印媒体和实用程序浮动，例如 pull-left 和 pull-right。大多数样式都可以使用!important 简单地覆盖。仅仅说“如果引导样式使用 !important 对于特定类，那么在你的样式中也使用重要”不是最佳实践 __ stackoverflow.com/questions/8360190/…
如果引导程序使用 !important 来覆盖他需要覆盖的某种样式，开发人员应该怎么做？有没有其他办法？
使用 CSS 特异性。这里有一个很好的答案：stackoverflow.com/questions/19768794/…

【解决方案2】：

如果此样式正确链接到标题，您可以通过添加边框来运行一个简单的测试：1px 纯红色；到 CSS 属性之一。我也会检查路径。你能把它们贴在这里吗？

【讨论】：