如何阻止 twitter bootstrap 和 pdfjs 中的 css/js 相互干扰？答案

【问题标题】：how do i stop the css/js in twitter bootstrap and pdfjs from intefering with each other?如何阻止 twitter bootstrap 和 pdfjs 中的 css/js 相互干扰？
【发布时间】：2013-06-04 06:35:24
【问题描述】：

我正在尝试集成一个同时使用 pdfjs（查看 pdf）和 twitter bootstrap（提供一些 ui 内容，如按钮/选项卡）的应用程序，但两者似乎无法在同一页面上玩得很好（可能缺少 iframe？）使用 pdf 查看器在工具栏上的元素位置错误和 ui 破坏其他变量由引导程序提供的东西搞砸了。我怎样才能让这两个玩得很好？我尝试了Andrew Homeyer 的解决方案，但它也不起作用

<style scoped>

元素，还有其他解决方案吗？

编辑：这就是我的意思，（在这个例子中，引导程序被破坏，但 pdfjs 似乎不受影响，我使用来自Andrew Homeyer 的 boostrap）

与没有 pdfjs 的外观相比，标签工作得很好，

这是我用于标签的代码：

<ul class="bootstrap-scope  nav nav-tabs" data-tabs="boottabs">
    <li class="active"><a data-toggle="boottabs" href="#red" class="bootstrap-scope">Red</a></li>
    <li><a data-toggle="boottabs" href="#orange"  class="bootstrap-scope">Orange</a></li>
    <li><a data-toggle="boottabs" href="#yellow" class="bootstrap-scope">Yellow</a></li>
    <li><a data-toggle="boottabs" href="#green" class="bootstrap-scope">Green</a></li>
    <li><a data-toggle="boottabs" href="#blue" class="bootstrap-scope">Blue</a></li>
</ul>
<div class="bootstrap-scope tab-content">
    <div class="tab-pane active" id="red">
        <h1>Red</h1>
        <p>red red red red red red</p>
    </div>
    <div class="bootstrap-scope tab-pane" id="orange">
        <h1>Orange</h1>
        <p>orange orange orange orange orange</p>
    </div>
    <div class="bootstrap-scope tab-pane" id="yellow">
        <h1>Yellow</h1>
        <p>yellow yellow yellow yellow yellow</p>
    </div>
    <div class="bootstrap-scope tab-pane" id="green">
        <h1>Green</h1>
        <p>green green green green green</p>
    </div>
    <div class="bootstrap-scope tab-pane" id="blue">
        <h1>Blue</h1>
        <p>blue blue blue blue blue</p>
    </div>
</div>

【问题讨论】：

我以前从未使用过 pdfjs，但如果我们有某种示例，它会更容易诊断。
@MikeLucid 你去吧
如果你还在为 bootstrap 设置范围，我将它放到一个单独的仓库中，让我的生活更轻松：github.com/homeyer/scoped-twbs

标签： javascript css twitter-bootstrap less pdf.js

【解决方案1】：

抱歉，我发现我有一些 css 实际上干扰了我的 boostrap 标签而不是 pdfjs，

    button {
            line-height:    normal;
    }
    .hidden {
            display:                none;
    }

    /*
     *      Rules for simulated drop-down/pop-up lists
     */
    ul {
            /* rules common to BOTH inner and outer UL */
            z-index:        100000;
            margin:         1ex 0;
            padding:        0;
            list-style:     none;
            cursor:         pointer;
            border:         1px solid Black;
            /* rules for outer UL only */
            width:          15ex;
            position:       relative;
    }
    ul li {
            background-color: #EEE;
            padding: 0.15em 1em 0.3em 5px;
    }
    ul ul {
            display:        none;
            position:       absolute;
            width:          100%;
            left:           -1px;
            /* Pop-Up */
            bottom:         0;
            margin:         0;
            margin-bottom: 1.55em;
    }
    .ui-layout-north ul ul {
            /* Drop-Down */
            bottom:         auto;
            margin:         0;
            margin-top:     1.45em;
    }
    ul ul li                { padding: 3px 1em 3px 5px; }
    ul ul li:hover  { background-color: #FF9; }
    ul li:hover ul  { display:      block; background-color: #EEE; }

【讨论】：