问题描述
现状
我有一个 <div class="span3"> 用于左列和 <div class="span9"> 用于右列，当它被调整到更小的尺寸时(在手机或平板电脑上)，左边的 span3 类将位于 span9 类的顶部.
I have a <div class="span3"> for the left column and <div class="span9"> for the right column, when it is resized to a smaller size (on mobile or tablet), the span3 class on the left will be on top of the span9 class.
理想情况
我不希望它只折叠成 1 列，因为我想继续拥有 2 列，即使它正在调整大小.如果我能在较小的屏幕尺寸(例如移动设备/平板电脑)上以 1:11 的比例显示它并在较大的屏幕尺寸(例如笔记本电脑/显示器)上继续以 3:9 的比例显示，那就太好了
I do not want it to collapse into just 1 column, cos I want to continue having 2 columns, even when it is being resized. It will be good if I can show it as a ratio of 1:11 on smaller screen sizes (eg. mobile/tablet) and continue having 3:9 on bigger screen sizes (eg. laptop/monitor)
我可以知道 Twitter Bootstrap 的响应式设计布局是否可以实现所需的情况?
推荐答案
不，Twitter Bookstrap 的响应式布局可以实现所需的情况.
No, the desired situation is possible with Twitter Bookstrap's responsive layout.
但是，修复起来并不难.
BUT, it's not a hard thing to fix.
如果您希望发生这种情况，您将需要在元素上添加另一组类.默认情况下，所有元素都在移动设备上堆叠，因为线性版本是我们所期望的.如果您查看 http://foundation.zurb.com/docs/grid.php您可以看到 Zurb 还基于 4 列移动网格创建了另一组样式.通过添加这些附加类，它允许您控制列占据 1/3 1/2 2/3 全宽.
You're going to need to add another set of classes on the elements if you want this to occur on. By default all of the elements stack on mobile because a linear version is what we've come to expect. If you check out http://foundation.zurb.com/docs/grid.php you can see that Zurb have also created another set of styles based on a 4 column mobile grid. By adding these additional classes it allows you control your columns to occupy 1/3 1/2 2/3 full width.
如果你忽略填充和边距，你会得到一些类似的东西
If you ignore padding and margins, you would have something along these lines
.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，您可以添加
Then to your existing HTML you can add
<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/
I've coded up a basic example for you to use -> http://playground.responsivedesign.is/twitter-bootstrap/
这篇关于是否可以使用 Twitter Bootstrap 的响应式布局并在缩小时继续显示 2 列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！