css - 冲突 bootstrap css 与其他 css 样式表

Question

我在将几个 css 样式表与 bootstrap 结合时遇到了问题。我发现这段 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 菜单和幻灯片图像工作正常，但其他带有 Bootstrap 类的元素看起来很奇怪。 Bootstrap 后包含所有样式表。

这是我在 featured.css 中的图像 slider css 代码，当我评论上面的代码时看起来不错，它位于 Bootstrap 样式表中

#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。也许你应该为你的“附加类”加上前缀，这样它们就不会与 Bootstrap 发生冲突？ 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/