Question

我正在建立一个新网站，我希望它有3列。像span3，span6，span3这样的东西。当在移动电话上查看时，我希望只有中间（span6）列可见（需要侧滚动才能看到外部列）。 Twitter的Bootstrap或Zurb的基金会是否可以采取这种行为？

修改我至少需要的是所有3列都保留为列。我不希望他们堆叠在智能手机上。我得到它与基金会合作，并想知道是否有一个Bootstrap的解决方案。目前我的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

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

Answer 2

你应该在这里查看zurb foundation 3的帆布幻灯片：

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

我不相信基础或自助支持开箱即用。

网站布局中的三列没有堆叠

2 个答案: