1

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

使用 BS 脚手架语法，我的网格中有几个嵌套的 div。通常看起来/工作正常；但是，有时当我重新加载页面时，整个页面的 div 会中断（标题导航、主要内容中的 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 & 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-->

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

头：

<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 上进行测试，还没有在其他浏览器中看到问题，但正如我所说，它会在它选择时发生。

所以。毕竟，我想我想知道这些症状可能对那里的知识渊博的人意味着什么。Bootstrap 非常出色，在很多方面都是我梦寐以求的工具——有没有人经历过这样的事情？

感谢您阅读本文。

4

1 回答 1

4

首先，您的布局中有一些糟糕的结构，它应该如下所示：

  <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 放置一行
  • 如果您不确定自己在做什么，请不要乱用 bootstrap CSS
  • 检查您是否不小心以与 BS 中相同的方式命名了一些自定义 CSS 类

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

于 2013-06-17T17:03:34.253 回答