javascript - Twitter ブートストラップの css/js と pdfjs が互いに干渉しないようにするにはどうすればよいですか?

Question

私はpdfjs（pdfを表示する）とtwitterブートストラップ（ボタン/タブなどのいくつかのUIを提供する）の両方を使用するアプリを統合しようとしていますが、2つは同じページでうまく再生できないようです（おそらくiframeが不足していますか？）ツールバーの要素が間違った位置にある pdf ビューアーの変数と、ブートストラップによって提供される ui が台無しになります。どうすればこの2人をうまくプレイさせることができますか? 私はAndrew Homeyerによる解決策を試しましたが、うまくいきませんでした.

<style scoped> 

要素、他の解決策はありますか?

編集:ここに私が意味するものがあります(この例では、ブートストラップはクローバーされていますが、pdfjs は影響を受けないようです。私はAndrew Homeyer のブーストラップを使用しています)

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>