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

【问题标题】：name conflict between popbox.css and bootstrap.csspopbox.css 和 bootstrap.css 之间的名称冲突
【发布时间】：2015-10-05 05:32:01
【问题描述】：

我注意到如果同时使用 popbox.css 和 bootstrap.css 会出现问题。有人知道解决方案吗？这是某人的小提琴，用于展示 popbox 的工作原理。

http://jsfiddle.net/kbwood/sV4bY/

如果您在弹出框库之外加载引导库

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

它不再起作用了。

这是一个不工作的例子。删除 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>

【问题讨论】：

这个问题可能是因为.open css in bootstrap
看来冲突在collapse；如果我将 div 更改为 collapse2 它可以工作（但弹出定位已关闭）。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

问题是由于您已将collapse 类应用于div。在 Bootstrap 中，这些默认是隐藏的，因为它是手风琴功能的一部分。从该 div 中删除该类或为其使用不同的名称。

示例：http://jsfiddle.net/tpjjsqg6/

【讨论】：

来自 popbox css：.collapse { position:relative; } 它的实际作用是多么可怕的类名。
@PaulAbbott 确实，很奇怪——尤其是因为它在 CSS 或 JS 文件的其他任何地方都没有使用。