Css Twitter引导：理解脚手架/网格

我正在使用Bootstrap，在我的固定（非响应）布局中有一个奇怪的布局问题

使用BS scaffolding语法，我的网格中有几个嵌套的div。通常看起来/工作正常；但是，有时当我重新加载页面时，整个页面的div都会中断（标题导航、主内容中的div等）

我无法重新创建此问题，它只是在需要时（再次，当我刷新/重新加载时）按它想要的方式运行

---

以下是问题发生时的屏幕截图，以及它应该始终是什么样子：

好的1

坏1

（我无法在这篇文章中添加更多URL；如果您想看到更多，可以将上面的2个更改为3487/ss-2-good.jpg&3484/ss-2-bad.jpg）

---

采取的步骤（无积极影响）：

-重做网格

-逐行检查我的自定义CSS，看看删除部分是否能解决问题

-确认路径、网页中的文件顺序等

-搜索，搜索，再搜索

---

以下是基本的HTML结构：

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

... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。

---

我正在加载外部文件，如下所示：

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

负责人：

;

在结束正文标记之前：

<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'); ?>

window.jQuery | | document.write（“”）

---

注:

-就像我说的，这可能会连续发生10次，然后在接下来的5次刷新/重新加载之后，看起来很好

-在上面加载的文件中，包含了Fancybox（i-modal.php）和自定义JS（i-JS.php）。这些文件中没有CSS或其他任何东西，似乎它可能会触发这种情况

-当前BS覆盖（bootstrap config.css）为空；似乎，当我添加任何内容时，问题就出现了，无论我添加的内容是否有边距或填充

-从我的研究来看，在其他固定布局中，我对嵌套网格部分使用“行流体”似乎是允许的

-到目前为止，在Safari/OSX上进行的测试还没有在其他浏览器中发现这个问题，但正如我所说的，当它选择这样做时就会发生

---

所以。在这一切之后，我想我想知道这些症状可能会给那些有知识的人带来什么启示。Bootstrap非常出色，在很多方面都是我梦想的工具——有人经历过类似的事情吗

---

感谢阅读此文。

首先，您的布局中有一些不好的结构，它应该是这样的：

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

... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。

您必须遵守以下规则：

• 不要在固定布局中使用行流体
• 全宽跨度为12
• 内容必须始终处于跨度内
• 子跨度必须成行-始终
• 子行中的跨距总和必须等于容器跨距（与行流体无关），例如，在span8中，您可以将一行放置为span6和span2
• 如果你不确定自己在做什么，不要搞乱引导CSS
• 检查您是否无意中以与BS中相同的方式命名了一些自定义CSS类

---

解决这些问题，它应该会解决您的显示问题。

首先，您的布局中有一些不好的结构，它应该是这样的：

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

... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。

您必须遵守以下规则：

• 不要在固定布局中使用行流体
• 全宽跨度为12
• 内容必须始终处于跨度内
• 子跨度必须成行-始终
• 子行中的跨距总和必须等于容器跨距（与行流体无关），例如，在span8中，您可以将一行放置为span6和span2
• 如果你不确定自己在做什么，不要搞乱引导CSS
• 检查您是否无意中以与BS中相同的方式命名了一些自定义CSS类

---

解决这些问题，它将解决您的显示问题。

在过去的3个月里，我一直在使用TBS，但我从未经历过这种情况。您的标记是否有效？你有什么JS错误吗？如果你关掉JS会发生吗？斯科特·辛普森，谢谢你的回复。这很奇怪。当我去验证页面时，它指出错误行27，第7列：错误结束标记头@Scott Simpson，当我在Safari中禁用JS时，网格仍然可以工作-很好-但焦虑的主要来源是，问题只在刷新时才会发生。我想可能是一个文件在加载它需要的其他文件之前在浏览器中加载上/下，但这似乎每次都会导致错误，有时不会。现在检查验证错误。错误的结束标记头---这意味着你有一个额外的结束标记头。试着删除它。就是这样，这个错误没有额外的标记，头部和身体都没有。在过去的3个月里，我一直在使用TBS，我没有经历过这种情况。您的标记是否有效？你有什么JS错误吗？如果你关掉JS会发生吗？斯科特·辛普森，谢谢你的回复。这很奇怪。当我去验证页面时，它声明