0

我对 Bootstrap 2的网格系统有疑问。

我想用一些文本制作一个标题，并在它的右侧制作一个图像。
因此我做了一个, 并在里面row放了 aspan8和 a 。span4

但是，当窗口太小而无法并排显示内容时，我希望span4div 位于 div 之前span8。

<div class="hero-unit">
    <div class="container">
        <div class="row">
            <div class="span8">
                This is some text
            </div>
            <div class="span4">
                <img src="image.png" alt="" />
            </div>
        </div>
    </div>
</div>

我怎样才能做到这一点？
所以换句话说，我怎样才能改变divs 的顺序。

如果我没有完全弄错，文档中没有描述这样的事情。

4

1 回答 1

2

您可以使用媒体查询和浮动来做到这一点。

应该看起来像这样：

<div class="span4 pull-right"><!-- Image here --></div>
<div class="span8"><!-- Text here --></div>

现在您应该使用媒体查询（如 responsive.less 文件中所示）在屏幕尺寸跳到特定标记以下时进行切换。然后确保span4' 的浮动已删除。您可能需要使用.row-fluid而不是通常.row使用并使用自己的填充以使其看起来很棒。

于 2013-02-10T19:46:58.537 回答