Question

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

是否有重新安排我的专栏的方法？我想像这样堆叠图像及其相应的文本区域：

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。

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

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

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>

这样，您就可以在所有视图中正确显示列。

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

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

还有其他方法可以达到这个目的但是它们无法使用引导程序进行响应式布局，并且由于没有充分的理由和类似的结果而更加复杂。

尝试在引导程序中尽可能保持标记简单和优雅，以便更好地进行维护，或者在类代码中容易丢失内容。

Answer 2

您是否尝试过将行放入您的跨度？

喜欢

<div class="row">
   <div class="span4">
       <div class="row">
          <div class="spanX">...</div>
       </div>
       <div class="row">
           <div class="spanX">...</div>
       </div>
   </div>
 <div>

Answer 3

除了使用行显示图片和相关信息之外，您还可以使用Twitter引导程序的缩略图，例如http://twitter.github.com/bootstrap/components.html 这是示例

    <ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/300x200" alt="">
<h3>Thumbnail label</h3>
<p>Thumbnail caption...</p>
</div>
</li>
...
</ul>

Answer 4

你可以在这里找到一个例子：

http://fittopage.org/2012/09/11/vertical-reordering-in-css/

CSS3中也有一个指令，但据我所知，它尚未推出。

更新：在css3中，它被称为flexbox，但目前只有chrome支持其中一些功能。更多信息here

Answer 5

我最后只是将每个图像和相应的文本放在同一行和列中。图像下方的文字。

Answer 6

您使用的是bootstrap 3x吗？

新的网格系统允许您为不同的屏幕尺寸设置自己的跨度大小，这样您就可以确保所有行按照您想要的方式排列。

示例：

<div class="col-lg-2 col-md-1 col-xs-1"></div>

查看http://getbootstrap.com/css/#grid

Answer 7

我建议在行之后添加一些。我想你可以把它像这样的结构

<div class = "container">
 <div class = "row">
  <div class = "col-md-12">
   <div class = "box-container">
    <div class = "image">
     <img href="path/to/image.jpg"/>
    </div>
    <div class = "paragraph">
     <p>Lorem Ipsum dolor set amit...</p>
    </div>
   </div><!-- end of box container-->
   <div class = "box-container">
    <div class = "image">
     <img href="path/to/image.jpg"/>
    </div>
    <div class = "paragraph">
     <p>Lorem Ipsum dolor set amit...</p>
    </div>
   </div><!-- end of box container-->
  </div>
 </div>
</div>

然后为您的盒子容器和段落容器添加一些宽度。

您也可以采用不同的方式。这将在您的移动视图时自动堆叠。

<div class = "container">
     <div class = "row">
      <div class = "col-md-4">
       <div class = "box-container">
        <div class = "image">
         <img href="path/to/image.jpg"/>
        </div>
        <div class = "paragraph">
         <p>Lorem Ipsum dolor set amit...</p>
        </div>
       </div><!-- end of box container-->
      </div><!-- 1st box-->
      <div class = "col-md-4">
       <div class = "box-container">
        <div class = "image">
         <img href="path/to/image.jpg"/>
        </div>
        <div class = "paragraph">
         <p>Lorem Ipsum dolor set amit...</p>
        </div>
       </div><!-- end of box container-->
      </div><!-- 2nd box-->
      <div class = "col-md-4">
       <div class = "box-container">
        <div class = "image">
         <img href="path/to/image.jpg"/>
        </div>
        <div class = "paragraph">
         <p>Lorem Ipsum dolor set amit...</p>
        </div>
       </div><!-- end of box container-->
      </div><!-- 3rd box-->

     </div>
    </div>

Answer 8

<div class="row">
<div class="col-sm-4">
    <div class="row">
        image1
    </div>
    <div class="row">
        textArea1
    </div>
</div>
<div class="col-sm-4">
    <div class="row">
        image2
    </div>
    <div class="row">
        textArea2
    </div>
</div>
<div class="col-sm-4">
    <div class="row">
        image3
    </div>
    <div class="row">
        textArea3
    </div>
</div>

我希望它有效。

使用Twitter引导程序 - 我可以更改行和列的顺序吗？

8 个答案: