Question

当我尝试将jQuery Notebook plugin包含到我的twitter引导程序页面时，我遇到了问题。问题是插件的CSS搞砸了。例如，在此fiddle上，如果您要选择文字，则会看到控件不在正确的位置。

但如果你remove bootstrap CSS - 一切都好。

查看jQuery notebook css，我可以看到所有类都使用

.jquery-notebook ....{

}

所以它们不太可能覆盖任何推特的风格。我该如何在这里修复样式？

如果jsfiddle在5年内突然消失，你仍然可以在这里找到代码：

<link rel="stylesheet" href="css/jquery.notebook.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">

<div class="my-editor">
    Here is my text    
</div>
<script>
$(document).ready(function(){
    $('.my-editor').notebook();
});
</script>
<script src="js/libs/jquery-1.11.0.min.js"></script>
<script src="js/libs/jquery.notebook.js"></script>

Answer 1

原因是Bootstrap覆盖 ul margin属性。所以你可以使用带有jquery notebook插件的bootstrap你只需要改变一些小修改来解决这个问题，

jquery.notebook.css

旧样式（行号 74 ）

.jquery-notebook.bubble ul {
   padding: 0;
   margin: 0;
   list-style: none;

}

新款式

.jquery-notebook.bubble ul {
     padding: 0;
     margin: -20px 0;      // Add top margin -20px
     list-style: none;
}

Answer 2

引导程序会在类名为h1和h2的元素的顶部和底部添加边距。尝试在css中为这两个元素设置边距为零。

.h1,.h2{
  margin:0;
}

找不到我覆盖样式的地方

2 个答案:

jquery.notebook.css