Загрузочный ответ: как исправить невосприимчивый элемент?

Question

Я включил отзывчивую функцию в twitter bootstrap, используя вложенную сетку для жидкости. При просмотре на небольшом мобильном устройстве каждая отдельная прокладка складывается. Тем не менее, я бы хотел, чтобы «maincontent» был распакован и показан горизонтально. Я попробовал отображение: inline-block; и min-width, но оба не работали. Любые рекомендации? Спасибо.

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="span9" id="maincontent"> 
     <div class="container-fluid"> 
     <div class="row-fluid"> 
     <div class="span2">2</div> 
     <div class="span8">8</div> 
     <div class="span2">2</div> 
     </div> 
     </div> 
    </div> 
    <div class="span3" id="sidebar"> 
     <!-- sidebar elements go here --> 
    </div> 
    </div> 
</div> 

Answer 1

Дайте что-то вроде этого выстрела:

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span9" id="maincontent"> 
      <div class="row"> 
       <div class="span2" style="float: left; width: 15%;">2</div> 
       <div class="span8" style="float: left; width: 65%;">8</div> 
       <div class="span2" style="float: left; width: 15%;">2</div> 
      </div> 
     </div> 
     <div class="span3" id="sidebar"> 
      <!-- sidebar elements go here --> 
      sidebar 
     </div> 
    </div> 
</div> 

Вы хотите настроить и играть с%, чтобы соответствовать вашим потребностям, и в конечном итоге переместить эти встроенные стили из в таблице стилей. Возможно, вам понадобится пощечина, важная для них, чтобы они не были переоценены уроками бутстрапа. Причина, по которой они складывались с вашей настройкой, заключается в том, что стили жидкости принимались во внимание, несмотря на неядерные классы контейнеров/строк, которые вы использовали, и изменили их на float: none, width: 100%; display: block divs.