0

现在的情况

我有一个<div class="span3">用于左列和<div class="span9">右列的,当它被调整为更小的尺寸(在移动设备或平板电脑上)时,左侧的 span3 类将位于 span9 类的顶部。

期望的情况

我不希望它只折叠成 1 列,因为我想继续拥有 2 列,即使它正在调整大小。如果我可以在较小的屏幕尺寸(例如手机/平板电脑)上将其显示为 1:11 的比例,并在较大的屏幕尺寸(例如笔记本电脑/显示器)上继续显示为 3:9,那就太好了

我可以知道 Twitter Bootstrap 的响应式设计布局是否可以实现所需的情况?

4

1 回答 1

1

不,使用 Twitter Bookstrap 的响应式布局可以实现所需的情况。

但是,这并不是一件很难解决的事情。

如果您希望发生这种情况,您将需要在元素上添加另一组类。默认情况下,所有元素都堆叠在移动设备上,因为线性版本是我们所期望的。如果您查看http://foundation.zurb.com/docs/grid.php,您会看到 Zurb 还创建了另一组基于 4 列移动网格的样式。通过添加这些额外的类,它可以让你控制你的列占据 1/3 1/2 2/3 全宽。

如果您忽略填充和边距,您将有一些类似的东西

.mobile-one {width: 25%;}
.mobile-two {width: 50%;}
.mobile-three {width: 75%;}
/* We've left this one off because it's the same style that is already applied 
.mobile-one {width: 100%;} */

然后到您现有的 HTML,您可以添加

 <div class="span3 mobile-one">...</div>
 <div class="span9 mobile-three">...</div>

或者

 <div class="span3 mobile-two">...</div>
 <div class="span9 mobile-two">...</div>

编辑

我编写了一个基本示例供您使用-> http://playground.responsivedesign.is/twitter-bootstrap/

于 2013-01-09T06:56:30.860 回答