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类的元素看起来很奇怪。所有样式表都包含在引导程序之后。

这是我在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.也许你应该在你的＆＃34;其他课程前加上＃34;所以他们不会与bootstrap冲突？ http://www.css-prefix.com/

选项2.如果您确定冲突的类只是您提到的那些我推荐做类似的事情：

Mastertable

如果您可以创建jsfiddle并向我展示完整示例http://jsfiddle.net/

，那将是最好的

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

1 个答案: