Currently utilizing Bootstrap for my project and encountering a peculiar layout issue within my fixed (non-responsive) design.
Using the BS scaffolding syntax, I have multiple nested divs in my grid. Typically, everything appears and functions correctly; however, intermittently upon page reload, the divs break throughout various sections of the page (header nav, main content divs, etc.)
I am unable to replicate this problem consistently, as it seems to occur randomly when I refresh/reload the page.
Provided below are screenshots illustrating the problem occurrence and how it should consistently appear:
good 1
bad 1
(Additional URLs can be requested by substituting "3487/ss-2-good.jpg" & "3484/ss-2-bad.jpg")
Steps taken but no successful outcome achieved:
- revising the grid
- meticulously reviewing my custom CSS line by line to identify potential triggers
- verifying paths, file order within webpage structure, etc.
- repeated searches for solutions
Outlined below 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-->
External files loaded as follows:
In HEAD section:
<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>
Prior to 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:
- Random occurrence of layout issues persist even after multiple attempts, followed by sporadic periods of correct display
- Includes such as Fancybox (i-modal.php) and custom JS (i-js.php) contain no apparent triggers for this behavior
- Currently, bootstrap-config.css remains empty; adding any content triggers the problem, irrespective of margin or padding settings
- After research, it seems that using "row-fluid" for nested grid sections is permissible within the fixed layout setup
- Problem noticed primarily on Safari / OSX; other browsers do not consistently exhibit the issue, but it remains unpredictable
Considering all observations, seeking insights from experienced individuals regarding these symptoms. While Bootstrap proves invaluable, has anyone encountered similar challenges?
Appreciate your attention to this matter.