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

Question

我试图集成一个同时使用 pdfjs（查看 pdfs）和 twitter bootstrap（提供一些 ui 的东西，如按钮/标签）的应用程序，但两者似乎无法在同一页面上玩得很好（可能缺少 iframe？） pdf查看器的变量在工具栏上的元素位置错误，并且引导程序提供的用户界面被搞砸了。我怎样才能让这两个玩得很好？我尝试了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>

Answer 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; }