javascript - Dribbble.js 覆盖 Twitter Bootstrap CSS

Question

我正在尝试向使用 bootstrap 的网站添加 dribbble shots。当我将 ID 添加到列表元素时，该元素会丢失所有样式。

我正在使用在这里找到的 dribbble.js:https://github.com/tmdvs/Dribbble.js

我的 JS 是:

<script src="scripts/dribbble.js" type="text/javascript"></script>
<script type="text/javascript">
    getShotsForID('tim', 'shots', 15);
</script>

HTML:

<div class="row-fluid">
    <ul class="thumbnails">
        <li  class="span3" id='shots'></li>
     </ul>
</div>

通常 HTML 会是:

<div class="row-fluid">
    <ul class="thumbnails">
        <li class="span3">
            <img src="images.png" class="img-polaroid" image alt="image" />
        </li>
        <li class="span3">
            <img src="images.png" class="img-polaroid" image alt="image" />
        </li>
        <li class="span3">
            <img src="images.png" class="img-polaroid" image alt="image" />
        </li>
        <li class="span3">
            <img src="images.png" class="img-polaroid" image alt="image" />
        </li>
    </ul>
</div>

Answer 1

如果您在这里查看，https://github.com/tmdvs/Dribbble.js/blob/master/style.css ,

你会看到 css 是基于 id 的，并且确实会覆盖 Bootstrap 中的很多 css，因为 #ids 有更高的 specificity值比 .classes

我会重构 dribbblejs 提供的 css 并删除任何不必要的样式