Twitter Bootstrap 堆叠层次结构答案

【问题标题】：Twitter Bootstrap Stacking HierarchyTwitter Bootstrap 堆叠层次结构
【发布时间】：2012-10-17 19:26:49
【问题描述】：

我对使用 Twitter Bootstrap 2 比较陌生，因为我只使用过 Foundation。我不知道该怎么做的一件事是在较小的分辨率上控制堆叠。

我正在使用三列布局，两个侧边栏和内容区域。看起来像这样：

| Sidebar 1 |   |   Content     |   | Sidebar 2 |

但是，在较小的分辨率上，我希望列像这样堆叠：

|  Content  |
| Sidebar 1 |
| Sidebar 2 |

我认为在 Bootstrap 中控制这种堆叠的唯一方法是使用 pull-left 或 pull-right。有没有更好的方法，或者甚至可以在 Bootstrap 中做到这一点？

谢谢！

【问题讨论】：

检查：stackoverflow.com/q/12902555/1478467

标签： html twitter-bootstrap responsive-design

【解决方案1】：

Bootstrap 中没有内置机制来控制堆叠顺序 - 元素将按照它们在 HTML 中出现的顺序堆叠。
如果 .pull-left 和 .pull-right 正在实现您想要的行为，那么这可能是您最好的选择，而无需求助于 JavaScript。

【讨论】：

问题是它们不工作。除非我只是很密集并且无法让它们正确放置在桌面视图中。有没有办法安排 html: CONTENT, SIDEBAR 1, SIDEBAR 2, 但让侧边栏 1 浮动到内容的左侧？
您能把您的代码放在jsFiddle 中以便我测试吗？

【解决方案2】：

我只是想知道如何做同样的事情，这里是代码：

<div class="container">
  <div class="row">
    <div class="span9">
      <div class="row">
        <div class="span6 pull-right">Content</div>
        <div class="span3 pull-left">Sidebar 1</div>
      </div>
    </div>
    <div class="span3">Sidebar 2</div>
  </div>
</div>

我在Blueprint CSS Class 中使用了同样的“技巧”包，但最近刚刚转换为 Bootstrap 并且正在转换。抱歉，我来晚了。

【讨论】：