как остановить css/js в twitter bootstrap и pdfjs от взаимодействия друг с другом?

Question

Я пытаюсь интегрировать приложение, которое использует как pdfjs (просмотр pdf-файлов), так и twitter bootstrap (предоставляя некоторые элементы ui, такие как кнопки/вкладки), но эти два кажутся неспособными играть хорошо на одной странице (возможно, без IFRAME?) другие переменные с программой просмотра pdf, имеющей элементы на панели инструментов в неправильном положении, и ui предоставляемый bootstrap, испорчен. Как я могу заставить этих двух играть хорошо? i'v пытался решение по Andrew Homeyer, но он не работал ни сделал элемент

<style scoped> 

, существуют ли другие решения?

EDIT: вот что я имею в виду, (в этом примере бутстраповский cloberred но pdfjs кажется неизменным, им с помощью boostrap из 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> 

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