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

Question

我正在使用bootstrap 3.3.2并遇到了令人困惑的情况.想要的效果如下图所示

图片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-*格时,我还需要将其看作下图.

图片http://imageshack.com/a/img911/4395/WIt2nk.gif

然而,在小屏幕上,第一行根据需要分成两行:第一行两个方形图像; 第二行一大.但是作为desktop图片显示的第2行分为三行:正方形,大,正方形.虽然我需要方形,方形,大.类似于第三行,因为我需要将大图像作为最后一行.我试图玩css订单属性,但它没有得到我的任何地方.我也在考虑插入额外div的images并让它们只在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屏幕.

PS更好地使用.img-responsive类而不是style=max-width: 100%;.