Twitter bootstrap offset not working properly

Question

I have read all the threads but I could't find out whats the problem with my code.

I see that there is a problem when I was trying to put offsets (or offset* class div tags) into my fluid grid system. Basically there is 2 columns having span2 and span7 classes and then I am going to divide the span7 column into some more columns. To do this I would have to use offset* because there is spaces in between my design. but the problem is even if i do use the offset classes I cant see any difference in the layout. I'll add the code:

   <!--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>

I have added all the required CSS files i am sure because all the others seem to work well. I am testing the site inside a local server.

Thanks in advance!

Answer 1

So it's helpful for questions like these if you provide a jsfiddle or something similar to show in its simplest form what your issue is.

In your example, the implementation of the 2.3.2 grid system is a bit off. The basic answer is that if you want to make another row-fluid inside an existing row-fluid you will need to have in inside of a span# to follow the Bootstrap grid system. Also the offset# should be called on the same div as the span#.

http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem (look for Fluid Nesting).

Here is an example of that nesting:

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

Here's a working version of what you made. Note that it does not have any nested row-fluids, but they should be easy to add now.

http://jsfiddle.net/3VJdH/