Question

我注意到如果使用popbox.css和bootstrap.css都会出现问题。有人知道解决方案吗？这是一个来自某人的小提琴，以展示popbox如何运作。

如果您将popstrap库加载到popbox库

之外

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>

Answer 1

问题是由于您已应用于collapse的{{1}}课程。在Bootstrap中，默认情况下隐藏它们，因为它是手风琴功能的一部分。从该div中删除该类或为其使用其他名称。

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

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

1 个答案: