引导 css 与其他 css 样式表冲突

Question

我在将几个 css 样式表与 bootstrap 结合使用时遇到了问题。我发现这段引导 css 代码给我带来了麻烦。

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

当我评论这段代码时，我的 css 菜单和幻灯片图像工作正常，但其他带有引导类的元素看起来很奇怪。引导后包含所有样式表。

这是我在 features.css 中的图像滑块 css 代码，当我在上面注释代码时看起来不错，它位于引导程序样式表中

#featured { 
	width:870px;
	padding-right:280px; 
	position:relative; 
	border:10px solid #141b1b; 
	height:420px; 
	background: #D3D3D3;
}
#featured ul.ui-tabs-nav { 
	position:absolute; 
	top:0; left:835px; 
	list-style:none; 
	padding:0;
	margin-left:0;
	margin-top: 0;
	width:315px; 
	z-index: 100;
}
#featured ul.ui-tabs-nav li { 
	padding: 0; padding-left: 15px;
	margin: 0;
	font-size:12px; 
	color:#666; 
}
#featured ul.ui-tabs-nav li img { 
	float:left;
	background: #FFF; 
	margin-right: 5px;
	padding: 4px; 
	border:1px solid #999;
}
#featured ul.ui-tabs-nav li span { 
	font-size:11px; font-family:Verdana; 
	line-height:18px;
	width: 300px;

}
#featured li.ui-tabs-nav-item a { 
	display:block; 
	padding: 5px 5px;
	margin: 0;
	height: 60px; 
	color: #333;
	line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover { 
	background:#FFF; 
}
#featured li.ui-tabs-selected { 
	background: url(../images/slider_hover.png) no-repeat;  
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a { 
}
#featured .ui-tabs-panel { 
	width:660px; height:350px; 
	background:#FFF; position:relative;
}
#featured .ui-tabs-panel .info { 
	position:absolute; 
	top:320px; left:0; 
	width: 850px;
	height:100px; 
	background: url('../images/transparent-bg.png'); 
}
#featured .info h2 { 
	font-size:18px; font-family:Georgia, serif; 
	color:#fff; padding:5px; margin:0;
	overflow:hidden; 
}
#featured .info p { 
	margin:0 5px; 
	font-family:Verdana; font-size:11px; 
	line-height:15px; color:#f0f0f0;
}
#featured .info a { 
	text-decoration:none; 
	color:#fff; 
}
#featured .info a:hover { 
	text-decoration:underline; 
}
#featured .ui-tabs-hide { 
	display:none; 
}

有人知道如何解决这个问题吗？

Answer 1

选项 1。也许您应该为“附加类”添加前缀，这样它们就不会与引导程序冲突？ http://www.css-prefix.com/

选项 2。如果您确定冲突的类只是您提到的那些，我建议您这样做：

.your-css-menu-class-name {
    -webkit-box-sizing: content-box;  // this is default value
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

如果你能创建 jsfiddle 并给我看完整的例子http://jsfiddle.net/