css - 推特 Bootstrap : make a 2x2 grid

Question

我有以下内容:

<div class="container-fluid">
   <div class="row-fluid">
      <div class="span3"></div>
      <div class="span3"></div>
      <div class="span3"></div>
      <div class="span3"></div>
   </div>
</div>

默认情况下，这个 div.span* 横跨整个屏幕宽度，如下所示:

[x][x][x][x]

在特定屏幕宽度下，我希望它显示在 2x2 网格中，如下所示:

[x][x]
[x][x]

我该怎么做？

Answer 1

抱歉我之前的尝试，我没有完全理解你的问题:

除非您使用自己的@media 选择器，否则您使用 Bootstrap 尝试的事情实际上是不可能的。有一个图书馆叫Neat .我认为这是 example你正在寻找。

早期尝试:

---

试试这个，来自 here :

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span6">
      <div class="row-fluid">
        <div class="span6">A</div>
        <div class="span6">B</div>
      </div>
      <div class="row-fluid">
        <div class="span6">C</div>
        <div class="span6">D</div>
      </div>
    </div>
  </div>
</div>

这应该会给你以下结果:

[A][B] 
[C][D]

好吧，有很多 div。不太确定这是否可以做得更轻。

---