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

【问题标题】：How to make columns in Bootstrap grid (instead of stacked)?如何在 Bootstrap 网格中制作列（而不是堆叠）？
【发布时间】：2012-09-26 05:23:36
【问题描述】：

我正在尝试使用 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/

谢谢

【问题讨论】：

【解决方案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 文件。

【讨论】：

【解决方案2】：

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

【讨论】：