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

Posted 2023-03-21

【中文标题】如何在 Bootstrap 网格中制作列（而不是堆叠）？

【英文标题】：How to make columns in Bootstrap grid (instead of stacked)?

【发布时间】：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/

谢谢

【问题讨论】：

尝试使结果框（或整个窗口）更宽。由于窗口太小，Bootstrap 可能正在堆叠列。

@grc -- 天哪！就是这样。如此简单——我认为那些微小的文本字符串无法堆叠，但我猜视口仍然小于引导程序所需的大小。谢谢！

Bootstrap 可能使用媒体查询工作，因此如果视口小于设置的宽度，它将堆叠列，无论它们有多宽。

【参考方案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 文件并尝试一下，设置边框供您参考。