Question

我一直在使用twitter bootstrap来设计我的主页，而且有些东西让我不禁在css框架中使用媒体查询，例如twitter bootstrap。在我的例子中，我显示了四个图像，如

<div class="container">
    <div class="row">
        <section>
            <article class="span3">
                <img src="gandalf1.jpg" />
            </article>
            <article class="span3">
                <img src="gandalf2.jpg" />
            </article>
            <article class="span3">
                <img src="gandalf3.jpg" />
            </article>
            <article class="span3 last">
                <img src="gandalf4.jpg" />
            </article>
        </section>
    </div>
</div>

使用行类和基本的重置部分，这个效果非常好，它可以很好地响应移动设备。我觉得我对正在发生的事情没有发言权，所以我希望得到一些控制权。

我想要的是强迫<section></section>下的所有内容进入某种合同，以使它们以某种方式表现，例如，在我的例子中，在某些时候，图像是一个接一个地垂直列出的。 / p>

在我的合同中，我希望图像永远不会保留原始顺序 - （原始顺序是水平的，即一行有四个图像，第二行有四个图像，等等）并且应该响应变化当宽度在600px和980px之间时，通过调整大小而不会超出其限制宽度

@media screen and (min-width:600px) and (max-width:980px) { ... }

为了达到这个目的，我尝试了很多东西，我想到的第一件事就是制作<section>和inline-block，但是没能产生预期的效果。我害怕尝试重做<{1}}类在这些宽度上是一个很高的顺序。

我应该集中精力寻找使用我编写的css代码的解决方案，还是应该尝试修改那些宽度的.row类？

控制对象在流体网格中的显示方式

0 个答案: