Question

我正在使用Bootstrap，并且在我的固定（无响应）布局中遇到了一个奇怪的布局问题。

使用BS脚手架语法，我的网格中有几个嵌套的div。通常看起来/工作正常;然而，有时当我重新加载页面divs遍及整个页面（标题导航，主要内容中的div等）

我无法重新创建这个问题，它似乎按照它想要的方式行动（再次，当我刷新/重新加载时）。

以下是问题发生时的概况截图，以及它应该总是如下：

好的1 http://static.inky.ws/image/3486/ss-1-good.jpg

坏了1 http://static.inky.ws/image/3485/ss-1-bad.jpg

（我不能在这篇文章中添加更多的URL;如果你想看到更多，上面的2可以改为3487 / ss-2-good.jpg＆amp; 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-->

我正在加载这样的外部文件：

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>

在关闭BODY标签之前：

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

注意：

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

- 在上面加载的文件中有一个包含Fancybox（i-modal.php）以及自定义JS（i-js.php）。这些文件中没有CSS或其他任何东西，似乎可能触发这个。

- 当前BS覆盖（bootstrap-config.css）为空;看起来，当我添加任何内容时，问题就会出现，无论我添加的内容是否有边距或填充。

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

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

SO。在这之后，我想我想知道这些症状可能对那些知识渊博的人有什么意义。 Bootstrap非常出色，在许多方面都是我梦寐以求的工具 - 有没有人经历过这样的事情？

感谢您阅读本文。

Answer 1

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

  <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
如果你不确定你正在做什么
检查您是否意外地以与BS

修复这些问题，它应该可以解决您的显示问题。

Twitter Bootstrap：了解脚手架/网格

1 个答案: