Twitter Bootstrap: understanding the scaffolding / grid - css

Question

I am working with Bootstrap and am having a strange layout issue in my fixed (not responsive) layout.
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.)
I cannot recreate this problem, it just seems to act the way it wants when it wants (again, when I refresh/reload).
Here are screenshots of what the issue looks like when it happens, and what it should always look like:
good 1
http://static.inky.ws/image/3486/ss-1-good.jpg
bad 1
http://static.inky.ws/image/3485/ss-1-bad.jpg
(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 & 3484/ss-2-bad.jpg)
Steps taken (to no positive effect):
-redo the grid
-go through my custom CSS line by line, seeing if removing portions solves the problem
-confirm paths, file order in webpage, etc.
-search, search and search again
Here is the basic HTML structure:
<div class="container">
<?php require ("includes/nav-top.php") ;?>
<!--page header -->
<div class="row" id="">
<div class="span6">
... content ...
</div>
<div class="span6">
... content ...
</div>
</div>
<div class="row">
... content ...
</div>
<div class="row-fluid">
<div class="span8">
<div class="span6">
... content ...
</div>
<div class="span6">
... content ...
</div>
<div class="row-fluid">
<div class="span6">
... content ...
</div>
<div class="span6">
... content ...
</div>
</div>
<!--row-fluid-->
</div>
<!--span8-->
<div class="span4">
... content ...
</div>
<!--span4-->
</div>
<!--row-->
<div id="" class="row">
<div class="span4">
... content ...
</div>
<div class="span4">
... content ...
</div>
<div class="span4">
... content ...
</div>
</div>
<!--row-->
<footer>
... content ...
</footer>
</div>
<!--container-->
I am loading the external files like this:
HEAD:
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
;
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-config.css">
<link rel="stylesheet" href="css/font-awesome.css">
<script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
BEFORE the closing BODY tag:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<?php require('includes/i-modal.php');?>
<?php require('includes/i-googleAnalytics.php');?>
<?php require_once('includes/i-js.php'); ?>
NOTES:
-like I said, this could happen 10x in a row, then the next 5 refreshes/reloads and it looks fine
-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.
-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.
-from my research it looks like my use of "row-fluid" for nested grid sections is allowable in the otherwise fixed layout
-so far, testing on Safari / OSX, have not seen the problem in other browsers, but as I said it happens when it chooses to.
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?
Thanks for reading this.

Answer 1

First of all you have some bad structure in your layout it should look like this:
<div class="row" id="">
<div class="span6">
<div class="row">
<div class="span3">
... content ...
</div>
<div class="span3">
... content ...
</div>
</div>
</div>
<div class="span6">
... content ...
</div>
</div>
<div class="row">
<div class="span12">
... content ...
</div>
</div>
<div class="row-fluid">
<div class="span8">
<div class="row-fluid">
<div class="span6">
... content ...
</div>
<div class="span6">
... content ...
</div>
</div>
</div>
</div>
You have to follow this rules:
don't use row-fluid in fixed layout.
full width span is 12.
content have to be in span - ALWAYS
sub-spans have to be in rows - ALWAYS
a sum of spans in sub-row have to be equal of container span (that don't concerns row-fluid) eg. in span8 you can place a row with span6 and span2
don't mess with bootstrap CSS if you are not SURE what you're doing
check if you didn't accidentally name some custom CSS classes same way as in BS
Fix those and it should fix your display problems.