Question

现状

左列有<div class="span3">，右列有<div class="span9">，当调整为较小尺寸（在手机或平板电脑上）时，左边的span3类会打开span9类的顶部。

期望情况

我不希望它崩溃到只有1列，因为我想继续拥有2列，即使它正在调整大小。如果我可以在较小的屏幕尺寸（例如，移动/平板电脑）上以1:11的比例显示它并且在更大的屏幕尺寸上继续具有3：9（例如，笔记本电脑/显示器），那将是很好的

我是否可以通过Twitter Bootstrap的响应式设计布局知道这是否可以实现？

Answer 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>

修改

我为您编写了一个基本示例 - ＆gt; http://playground.responsivedesign.is/twitter-bootstrap/

是否可以使用Twitter Bootstrap的响应式布局，并在缩小时继续显示2列？

1 个答案: