Javascript popbox.css和bootstrap.css之间的名称冲突_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript popbox.css和bootstrap.css之间的名称冲突

javascript jquery html css twitter-bootstrap

Javascript popbox.css和bootstrap.css之间的名称冲突,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我注意到，如果同时使用popbox.css和bootstrap.css，就会出现问题。有人知道解决这个问题的办法吗？这是一把某人的小提琴，展示popbox是如何工作的如果加载popbox库之外的引导库它不会再工作了这是一个不起作用的例子。删除bootstrap.min.css文件以使其正常工作 <!DOCTYPE html> <head> <meta http-equiv='Content-type' content='text/html; char

我注意到，如果同时使用popbox.css和bootstrap.css，就会出现问题。有人知道解决这个问题的办法吗？这是一把某人的小提琴，展示popbox是如何工作的

如果加载popbox库之外的引导库

它不会再工作了

这是一个不起作用的例子。删除bootstrap.min.css文件以使其正常工作

<!DOCTYPE html>
<head>
  <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
  <title>PopBox</title>
  <link href="../static/css/popbox.css" type="text/css" rel="stylesheet" media="screen" charset="utf-8">

</head>
<body>
<div class="container">

    <h1>PopBox</h1>

 <div class='popbox'>
   <a class='open' href='#'>
     <img src='' style='width:14px;position:relative;'> Click Here!
   </a>

   <div class='collapse'>
     <div class='box'>
       <div class='arrow'></div>
       <div class='arrow-border'></div>

       Content from first popup
     </div>
   </div>
 </div>  

</div>
</body>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script src="../static/js/popbox.js" type="text/javascript" charset="utf-8"></script>
   <link href="../static/css/bootstrap.min.css" rel="stylesheet">

<script type='text/javascript'>
   $(document).ready(function(){
     $('.popbox').popbox();
   });
</script>


弹匣
弹匣
来自第一个弹出窗口的内容
$（文档）.ready（函数（）{
$（'.popbox'）.popbox（）；
});

问题是由于应用于

div

的

collapse

类造成的。在引导中，这些默认情况下是隐藏的，因为它是手风琴功能的一部分。请从该div中删除该类，或者为其使用其他名称

示例：

问题可能是由于以下原因而发生的。bootstrapIt中的open css看起来冲突是在

崩溃中发生的

；如果我将divs改为

collapse2

，它会工作（但弹出的位置是关闭的）。从弹出框css:

。collapse{position:relative；}

它的实际功能是多么可怕的类名啊。@PaulAbbott确实很奇怪-尤其是它在css或JS文件的其他任何地方都没有使用。