jsfiddle上的Bootstrap网格

Question

我正在尝试Bootstrap并使用jsfiddle.net创建一些快速而肮脏的测试。

然而，我在一个非常简单的测试中遇到了一堵砖墙。我只想在Bootstrap中看到网格系统，所以我复制了他们的第一个例子：

<div class="row">
  <div class="span4">Span 4</div>
  <div class="span8">Span 8</div>
</div>

然而，它似乎不起作用 - “跨度4”和“跨度8”出现堆叠而不是预期的两列布局。

我错过了一些明显的东西吗？这是小提琴：http://jsfiddle.net/8Xf2j/1/

由于

Answer 1

如果您使用bootstrap-combined.min.css文件，则表示Responsive Layout处于有效状态。

此外，您必须使用.container来设置最小宽度（如果没有，则主体将适合窗口，这将导致无论如何都会在小屏幕上进行堆叠）。

以下是使用网格的一种方法：Demo (jsfiddle)

<div class="container">
    <div class="row">
      <div class="span4">Span 4</div>
      <div class="span8">Span 8</div>
    </div>
</div>

您应该注意到资源中只包含bootstrap.min.css文件。

Answer 2

看到已经定义了span的宽度。其总宽度为960px（span4（320px）+ span8（640px）= span12（960px））。所以jsfiddle正在显示这样的结果。尝试制作一个html文件并尝试这个并设置边框供您参考。