css响应显示不同

Question

一个问题我不太明白。 我做了一个在线样本，当我调整窗口大小时，SPAN会逐个响应。 在线样本http://jsfiddle.net/Pva7y/1/

在线图片

但是，我将相同的代码复制到我的本地html，SPANs响应就在一起。 本地图片。

为什么不同？感谢

HTML：

<div class="row ">
    <div class="span7 blue">
    1
    </div>
    <div class="span2 red">
       2
   </div>
    <div class="span3 green">
      3
    </div>
</div>

CSS：

.blue{background-color:blue;}
.red{background-color:red;}
.green{background-color:green;}

Answer 1

首先，您忘记使用container div。正确的模式是

<div class="container">
  <div class="row">
    <div class="span12">
      1 2 3
    </div>
  </div>
</div>

请参阅更正的jsfiddle (1)。

接下来，如果您希望页面具有响应性并使布局符合视口大小，则还必须包含bootstrap-responsive.css。见jsfiddle (2)。在本地HTML中，您使用bootstrap.css和bootstrap-responsive.css或先前的文件合并到一个CSS以减少​​客户端 - 服务器请求数。

Answer 2

你的<div>已经浮现在你的小提琴中，但是从你的截图中看，它们并没有在你的本地html中浮动。由于bootstrap.css使用span类浮动<div>元素，我猜测bootstrap.css未在本地html文件中正确加载。

解决问题的方法是检查Inspector（如果您使用的是Chrome）或Firebug（如果您使用的是Firefox）。查看小提琴中三个<div>的计算机样式和本地html，并进行比较。它们必须采用不同的样式，因为它们在同一浏览器上看起来不同，因此这是开始排除故障的方法。