基本上，我在HEAD标记中的模板上声明我的外部CSS。然后，如果我在同一个标签中声明另一个外部CSS文件（TB），那么页面中的所有地狱都会崩溃。然而，如果我让两个CSS文件声明彼此远离，即一个在body中，另一个在head中，一切似乎都可以。
这样做事有问题吗？或者，理想情况下，我应该将两个CSS文件合并为一个巨大的文件。
我所想做的就是将TB的一些元素合并到我想要保留的现有布局中，而不是从头开始重写所有内容。
谢谢。
- Sample code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Test</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<!--
-->
<link href="../externalsheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
-->
</style>
</head>
<link rel="stylesheet" type="text/css" href="../cssverticalmenu.css" />
<script type="text/javascript" src="../cssverticalmenu.js"></script>
<body>
<div id="wrapper">
<div id="head"><img src="../headtop.jpg" alt="img" width="870" height="153" />
<div>
Club test</div>
</div>
<div id="content">
<ul id="verticalmenu" class="glossymenu">
<li><a href="index.php">Home</a></li>
<li><a href="#">Insert and Update</a>
<ul>
<li><a href="insertmember.php">Add member into database</a></li>
<li><a href="insertevent.php">Add event into database</a></li>
<li><a href="inserttotal.php">Add member total and comment into database</a></li>
<li><a href="updatemember.php">Update members personal details </a></li>
</ul>
</li>
<li><a href="#" >Delete</a>
<ul>
<li><a href="deletemember.php">Remove member from database</a></li>
<li><a href="deleteevent.php">Remove event from database</a></li>
<li><a href="deltotal.php">Remove member total & comment from database</a></li>
</ul>
</li>
<li><a href="#" >Show data</a>
<ul>
<li><a href="showmember.php">Show members on database</a></li>
<li><a href="showevent.php">Show events on database</a></li>
<li><a href="showtotal.php">Show member totals and comments on database</a></li>
</ul>
</ul>
<div class="contentbox"><!-- TemplateBeginEditable name="main box" -->main box<!-- TemplateEndEditable --></div>
<link rel="stylesheet" type="text/css" href="bootstrap.css"> // Attempt here to allow TB to work
<div id="foot">
<a href="http://validator.w3.org/check?uri=referer"><img
src="../Grants.jpg"
alt="Valid XHTML 1.0 Transitional" width="585" height="80" border="0" /></a>
<br />
</div>
</div>
</div>
</body>
</html>
我在这里做了一个盲目的猜测，但你可能导入了错误的CSS；以下是如何将CSS导入head:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap first, then your custom CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/your-css.css" rel="stylesheet">
</head>
<body>
<!-- Your page content here -->
<!-- jQuery required for Bootstrap plugins -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>