css - 使用 Twitter bootstrap - 我可以更改行和列的顺序吗？

Question

我有两行，每行三列。第一行包含图像，第二行包含带有文本的区域。在桌面浏览器中 - 三列水平对齐 - 每个图像都在相应文本区域的顶部对齐。 但在移动设备上，当然，所有列都堆叠在彼此下方。 这使得第一行中的所有图像都显示在彼此下方。然后文本区域以相同的方式跟随。

是否有一种 css 方式来重新排列我的列？我想像这样将图像及其相应的文本区域堆叠在一起:

image1
textArea1
image2
textArea2
image3
textArea3

我有一个 jsfiddle设置。

<div class="row">
<div class="span4"> <div class="span4"> <div class="span4">
<div class="row">
<div class="span4"> <div class="span4"> <div class="span4">

没有图片，但您可以大致了解。

Answer 1

我假设您使用的是 bootstrap 3.0。

这是一种很常见的布局情况。 您有几个选择。

如果您将所有列放在同一个容器中并在各种 View 中相应地处理它们，则可以使用带有偏移量的内置 Bootstrap 列重新排序。然而，这主要与重新排列内容显示的顺序有关，并不是针对这种特定情况的最佳顺序，但看看它是如何工作的，因为它将在未来的各种场景中派上用场。

Bootstrap 3.0 offsets

但是对于您的情况最合适的解决方案以及我在这种情况下广泛使用的解决方案是将图像和文本放在同一列上，如下所示:

<div class="row">
    <div class="col-md-3">
        <img class="img-responsive" src="..."/>
        <p>...image text here...</p>
    </div>
    <div class="col-md-3">
        <img class="img-responsive" src="..."/>
        <p>...image text here...</p>
    </div>
    <div class="col-md-3">
        <img class="img-responsive" src="..."/>
        <p>...image text here...</p>
    </div>
</div>

这样您就有了一个在所有 View 中正确显示的列。

请记住，bootstrap 3 是移动优先的，开发应该从最小的 View 开始到最大的。 始终尝试将相关的 dom 元素放在一起，以便它们在不同大小的布局上具有理想的行为。

您只需确保您的图像等于或大于您较大的列空间宽度，并且您在图像上使用 img-responsive 类，以使其正确缩放。

还有其他方法可以实现这一点，但它们破坏了使用 bootstrap 进行响应式布局的目的，并且会无缘无故地变得更加复杂并产生类似的结果。

尽量在 Bootstrap 中保持标记尽可能简单和优雅，以便更好地维护，否则很容易在类的代码汤中丢失东西。