bootstrap css 不规则瓷砖的布局 - 使用推拉

Question

我在使用 bootstrap 3.3.2 和运行时遇到了困惑。想要的效果如下图

image http://imageshack.com/a/img537/8048/MAcoOV.png

我现在的html是这样的

 <div class='container'>

        <div style='padding-bottom: 30px;' class='row'>
          <div class='col-md-3 col-sm-3 col-xs-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div>
          <div class='col-md-3 col-sm-3 col-xs-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div>
          <div class='col-md-6 col-sm-6 col-xs-12'><img style='max-width: 100%;'src="http://placehold.it/840x400"></div>
        </div>

        <div style='padding-bottom: 30px;' class='row'>
          <div class='col-md-3 col-sm-3 col-xs-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div>
          <div class='col-md-6 col-sm-6 col-xs-12'><img style='max-width: 100%;'src="http://placehold.it/840x400"></div>
          <div class='col-md-3 col-sm-3 col-xs-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div>
        </div>

        <div style='padding-bottom: 30px;' class='row'>
          <div class='col-md-6 col-sm-6'><img style='max-width: 100%;'src="http://placehold.it/840x400"></div>
          <div class='col-md-3 col-sm-3'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div>
          <div class='col-md-3 col-sm-3'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div>
        </div>

</div>

我目前对桌面屏幕上的外观感到满意。但是，当屏幕尺寸小于 770px 或者当它分成 col-xs-* 网格时，我还需要让它看起来像下面的图片。

image http://imageshack.com/a/img911/4395/WIt2nk.gif

但是，在小屏幕上，第一行会根据需要分成两行：第一行是两个方形图像；二线一大。但是 desktop 图片上显示的第 2 行分成三行：正方形、大、正方形。虽然我需要正方形，正方形，大。第三行也类似，因为我需要大图像作为最后一行。我试图玩 css order 属性但它没有得到我的任何地方。我也在考虑用 image 插入额外的 div 并让它们只显示在 xs 网格上，但这似乎有点矫枉过正。没有任何其他想法，想知道是否有人有提示。谢谢

Answer 1

总是首先考虑移动设备

为此你必须使用 push 和 pull。所以解决方案将是这样的

<div class='container'>

        <div style='padding-bottom: 30px;' class='row'>
          <div class='col-md-3 col-sm-3 col-xs-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div>
          <div class='col-md-3 col-sm-3 col-xs-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div>
          <div class='col-md-6 col-sm-6 col-xs-12'><img style='max-width: 100%;'src="http://placehold.it/840x400"></div>
        </div>

        <div style='padding-bottom: 30px;' class='row'>
          <div class='col-md-3 col-sm-3 col-xs-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div>

          <div class='col-md-3 col-sm-3 col-xs-6 col-sm-push-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div>
          <div class='col-md-6 col-sm-6 col-xs-12 col-sm-pull-3'><img style='max-width: 100%;'src="http://placehold.it/840x400"></div>
        </div>

        <div style='padding-bottom: 30px;' class='row'>

          <div class='col-md-3 col-sm-3 col-xs-6 col-sm-push-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div>
          <div class='col-md-3 col-sm-3 col-xs-6 col-sm-push-6'><img style='max-width: 100%;'src="http://placehold.it/400x400"></div>
          <div class='col-md-6 col-sm-6 col-xs-12 col-sm-pull-6'><img style='max-width: 100%;'src="http://placehold.it/840x400"></div>
        </div>

</div>

所以实际上我所做的是首先我为xs/移动屏幕设计它......然后我使用push和pull来调整col 在 sm、md 和 lg 屏幕中。

P.S. 最好使用 .img-responsive class 而不是 style=max-width: 100%;.

更新- Bootstrap 4

order-* 和 .offset-* 是在 Bootstrap 4 中使用 flexbox 替换推拉 classes 的。喜欢

<div class="row">
    <div class="col-md-5 order-md-2">
        <div class="card card-body">RIGHT ALIGN</div>
    </div>
    <div class="col-md-7 order-md-1">
        <div class="card card-body">LEFT ALIGN</div>
    </div>
</div>

bootstrap css 不规则瓷砖的布局 - 使用推拉

bootstrap css layout of irregular tiles - using push and pull

css

twitter-bootstrap-3