Сброс бутстрапа Twitter не работает должным образом

Question

Я прочитал все темы, но не смог узнать, в чем проблема с моим кодом.

Я вижу, что есть проблема, когда я пытался поместить смещения (или смещения * теги div класса) в мою систему сетки. В основном есть 2 столбца с классами span2 и span7, а затем я собираюсь разделить столбец span7 на несколько столбцов. Для этого мне пришлось бы использовать offset *, потому что между моим дизайном есть пробелы. но проблема даже в том, что я использую классы смещения, которые я не вижу различий в макете. Я добавлю код:

<!--small column--> 
    <div class="row-fluid"> 
     <div class="span2"> 
     <ul class="nav nav-list"> 
      <li class="nav-header">Available Electives</li> 
      <li><a href="#">Dentist</a></li> 
      <li><a href="#">Medical</a></li> 
      <li><a href="#">Blah</a></li> 
      <li><a href="#">And Blah</a></li> 
     </ul> 
     </div> 

     <!--big column--> 
     <div class="row-fluid"> 
     <div class="offset1"></div> 
     <div class="span7"> 
     <h2>Join us!</h2> 
     <p>What you do here will not only change the lives of people you help through this volunteer experience but also it willforever change your view on life as you know it. We promise you that the new places, cultures, cuisine and people you encounter will reward you with a whole new perspective in to life. 
     Join with us and help to change a life; be it yours or someone else’s. 
     </p> 
     </div> 
     <div class="span2"> 
     <img src="img/ceylonese-internship.jpg" class="thumbnail"> 
     </div> 
    </div> 
    </div> 

Я добавил все необходимые файлы CSS, я уверен, потому что все остальные, похоже, работают хорошо. Я тестирую сайт на локальном сервере.

Заранее благодарен!

Answer 1

Так что это полезно для таких вопросов, если вы предоставляете jsfiddle или что-то подобное, чтобы показать в своей простейшей форме, какова ваша проблема.

В вашем примере реализация решетчатой ​​системы 2.3.2 немного выключена. Основной ответ заключается в том, что если вы хотите сделать еще один ряд жидкости внутри существующей рядовой жидкости, вам нужно будет находиться внутри пролета #, чтобы следовать за системой сетки Bootstrap. Также смещение # должно вызываться в том же div, что и span #.

http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem (ищите жидкостное гнездо).

Вот пример того, что вложенности:

<div class="row-fluid"> 
    <div class="span8"> 
    Fluid 8 
    <div class="row-fluid"> 
     <div class="span6">Fluid 6</div> 
     <div class="span6">Fluid 6</div> 
    </div> 
    </div> 
    <div class="span3 offset1"> 
    Fluid 3, Offset 1 
    </div> 
</div> 

Вот рабочая версия о том, что вы сделали. Обратите внимание, что в нем нет вложенных жидкостей строк, но теперь их нужно легко добавить.

http://jsfiddle.net/3VJdH/