css - 如何在 Bootstrap 网格中制作列（而不是堆叠）？

Question

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

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

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

但是，它似乎不起作用——“Span 4”和“Span 8”看起来是堆叠的，而不是预期的两列布局。

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

谢谢

score 3 · Accepted Answer

如果使用该bootstrap-combined.min.css文件，则意味着响应式布局处于活动状态。

此外，您必须使用 a.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文件包含在资源中。

score 0 · Accepted Answer

请注意，跨度的宽度已经定义。它的总宽度是 960px(span4(320px) + span8(640px) = span12(960px))。所以 jsfiddle 正在显示这样的结果。创建一个 html 文件并尝试它，设置边框供您参考。

2 回答 2