twitter-bootstrap - 网站布局中的三列不堆叠

Question

我正在建立一个新网站，我希望它有 3 列。像 span3、span6、span3 这样的东西。在手机上查看时，我希望只有中间（span6）列可见（需要横向滚动才能看到外列）。Twitter 的 Bootstrap 或 Zurb 的 Foundation 是否可以实现这种行为？

编辑 我最不需要的是所有 3 列都保留为列。我不希望它们堆叠在智能手机上。我让它与 Foundation 合作，并想知道 Bootstrap 是否有解决方案。目前我的引导代码堆叠所有 3 列？

基础

<div class="row">
  <div class="small-3 large-3 columns">
    <p>Lorem ipsum</p>
  </div>
  <div class="small-6 large-6 columns">
    <p>Lorem ipsum </p>
  </div>
  <div class="small-3 large-3 columns">
    <p>Lorem ipsum </p>
  </div>
</div>

引导程序

<div class="row">
  <div class="span3">
    <p>Lorem ipsum</p>
  </div>
  <div class="span6">
    <p>Lorem ipsum</p>
  </div>
  <div class="span3">
    <p>Lorem ipsum</p>
  </div>
</div>

Answer 1

您应该在此处查看 zurb Foundation 3 的画布外幻灯片：

http://zurb.com/playground/off-canvas-layouts

我不相信基金会或引导程序支持这一点。

Answer 2

不幸的是，它不可能开箱即用，主要是因为侧面滚动条件。甚至没有他们的响应版本。