title: Twitter Bootstrap: understanding the scaffolding / grid
body: <p>I am working with Bootstrap and am having a strange layout issue in my fixed (not responsive) layout.</p>
  
  <p>Using the BS scaffolding syntax, I have several nested divs in my grid. Usually looks/works fine; however, sometimes when I reload the page divs break throughout the page (header nav, divs in main content, etc.)</p>
  
  <p>I cannot recreate this problem, it just seems to act the way it wants when it wants (again, when I refresh/reload).</p>
  
  <hr>
  
  <p>Here are screenshots of what the issue looks like when it happens, and what it should always look like:</p>
  
  <p>good 1
  <a href="http://static.inky.ws/image/3486/ss-1-good.jpg" rel="nofollow">http://static.inky.ws/image/3486/ss-1-good.jpg</a></p>
  
  <p>bad 1
  <a href="http://static.inky.ws/image/3485/ss-1-bad.jpg" rel="nofollow">http://static.inky.ws/image/3485/ss-1-bad.jpg</a></p>
  
  <p>(I cannot add more URLS to this post; if you want to see more, the above 2 can be changed to 3487/ss-2-good.jpg &amp; 3484/ss-2-bad.jpg)</p>
  
  <hr>
  
  <p>Steps taken (to no positive effect):</p>
  
  <p>-redo the grid </p>
  
  <p>-go through my custom CSS line by line, seeing if removing portions solves the problem</p>
  
  <p>-confirm paths, file order in webpage, etc.</p>
  
  <p>-search, search and search again</p>
  
  <hr>
  
  <p>Here is the basic HTML structure:</p>
  
  <pre><code>   &lt;div class="container"&gt; 
  
  &lt;?php require ("includes/nav-top.php") ;?&gt;
    &lt;!--page header --&gt;
    &lt;div class="row" id=""&gt;
      &lt;div class="span6"&gt;
           ... content ...
      &lt;/div&gt;
      &lt;div class="span6"&gt;
          ... content ...
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
         ... content ...
    &lt;/div&gt;
    &lt;div class="row-fluid"&gt;
      &lt;div class="span8"&gt;
        &lt;div class="span6"&gt;
            ... content ...
        &lt;/div&gt;
  
  
        &lt;div class="span6"&gt;
            ... content ...
        &lt;/div&gt;
  
  
        &lt;div class="row-fluid"&gt;
          &lt;div class="span6"&gt;
              ... content ...
          &lt;/div&gt;
          &lt;div class="span6"&gt;
              ... content ...
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!--row-fluid--&gt; 
  
      &lt;/div&gt;
      &lt;!--span8--&gt;
  
      &lt;div class="span4"&gt;
         ... content ...
      &lt;/div&gt;
      &lt;!--span4--&gt; 
  
    &lt;/div&gt;
    &lt;!--row--&gt;
  
    &lt;div id="" class="row"&gt;
      &lt;div class="span4"&gt;
          ... content ...
      &lt;/div&gt;
      &lt;div class="span4"&gt;
        ... content ...
      &lt;/div&gt;
      &lt;div class="span4"&gt;
       ... content ...
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--row--&gt;
  
    &lt;footer&gt;
     ... content ...
    &lt;/footer&gt;
  &lt;/div&gt;
  &lt;!--container--&gt;
  </code></pre>
  
  <hr>
  
  <p>I am loading the external files like this:</p>
  
  <p>HEAD:</p>
  
  <pre><code>&lt;link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;
  ;
  &lt;link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'&gt;
  
  &lt;link rel="stylesheet" href="css/bootstrap.css"&gt;
  
  &lt;link rel="stylesheet" href="css/bootstrap-config.css"&gt;
  &lt;link rel="stylesheet" href="css/font-awesome.css"&gt;
  &lt;script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>BEFORE the closing BODY tag:</p>
  
  <pre><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"&gt;&lt;/script&gt; 
  &lt;script&gt;window.jQuery || document.write('&lt;script src="js/vendor/jquery-1.8.2.js"&gt;&lt;\/script&gt;')&lt;/script&gt; 
  &lt;script src="js/vendor/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;?php require('includes/i-modal.php');?&gt;
  &lt;?php require('includes/i-googleAnalytics.php');?&gt;
  &lt;?php require_once('includes/i-js.php'); ?&gt;
  </code></pre>
  
  <hr>
  
  <p>NOTES:</p>
  
  <p>-like I said, this could happen 10x in a row, then the next 5 refreshes/reloads and it looks fine</p>
  
  <p>-in the above files loaded in there is an include for Fancybox (i-modal.php) as well as custom JS (i-js.php). There is no CSS or anything else in those files which seems like it might trigger this.</p>
  
  <p>-currently the BS overwrites (bootstrap-config.css) is empty; seemingly, when I add anything to it the problem kicks in, whether or not what little I add has margin or padding.</p>
  
  <p>-from my research it looks like my use of "row-fluid" for nested grid sections is allowable in the otherwise fixed layout</p>
  
  <p>-so far, testing on Safari / OSX, have not seen the problem in other browsers, but as I said it happens when it chooses to.</p>
  
  <hr>
  
  <p>SO. After all this, I guess I am wondering what these symptoms might suggest to the knowledgeable out there. Bootstrap is outstanding, in many ways the tool of my dreams - has anyone experienced anything like this?</p>
  
  <p>Thanks for reading this.</p>