css - CSS响应显示不同

Question

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

在线图片

但是，我将相同的代码复制到我的本地 html 中，将 SPAN 响应放在一起。本地图像。

为什么不同？谢谢

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

首先是你忘了使用containerdiv。正确的模式是

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

请参阅更正的 jsfiddle (1)。

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

Answer 2

您<div>的 s 浮动在您的 Fiddle 中，但从您的屏幕截图来看，它们并未浮动在您的本地 html 中。而且由于 bootstrap.css 使用 span 类浮动<div>元素，我猜 bootstrap.css 没有正确加载到您的本地 html 文件中。

解决问题的一种方法是检查 Inspector（如果您使用的是 Chrome）或 Firebug（如果您使用的是 Firefox）。查看<div>你的 fiddle 和你本地的 html 中三个 s 的计算机样式，并比较它们。它们的样式肯定是不同的，因为它们在同一个浏览器上看起来不同，所以这是开始故障排除的方法。