1

我一直在使用 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>纳入某种合同，以使它们以某种方式运行，例如，在我的示例中，在某些时候，图像一个接一个地垂直列出。

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

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

为了实现这一点，我尝试了很多东西，我想到的第一件事是制作<section>and inline-block，但未能产生预期的效果。恐怕.row在这些宽度上尝试重做课程将是一个非常高的要求。

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

4

0 回答 0