bootstrap css布局不规则瓷砖 - 使用推拉 [英] bootstrap css layout of irregular tiles - using push and pull

问题描述

我使用bootstrap 3.3.2并遇到混乱的情况。想要的效果如下图所示

I am using bootstrap 3.3.2 and ran into a confusing situation. The wanted effect is as shown on a picture below

我当前的html看起来像这样

My current html looks like this

 <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时，我还需要使它看起来像下面的图片 - * 网格。

And I am currently satisfied with what it looks like on a desktop screen. However, I also need to make it look as on a picture below when the screen size is smaller than 770px or when it breaks into a col-xs-* grid.

但是，在小屏幕上，第一行根据需要分成两行：第一行两个正方形图像;线两大。但是在桌面图片上显示的第2行分为三行：正方形，大，正方形。虽然我需要方形，方形，大。类似于第三行，因为我需要大图像是最后一个。我试图玩css订单属性，但它没有得到我的任何地方。我还在考虑用 image 插入额外的 div ，并使它们只显示在 xs 网格，但它似乎是一个过度。没有任何其他的想法，想知道是否有人有提示。谢谢

However, on small screen the first row breaks as desired into 2 lines: line one two square images; line two one large. But the row 2 as displays on desktop picture breaks into three lines: square, large, square. While I need square, square, large. Similar goes to the third row as I need the large image to be the last. I was trying to play with css order property but it did not get my anywhere. I was also thinking about inserting extra div's with images and make them show up only on xs grid, but it seems to be an overkill. Don't have any other ideas and wondering if anyone have a tip. Thank you

推荐答案

始终认为手机第一！

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

For this you have to use push and pull. So solution will be like this

<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 / mobile screen ...然后我使用 push 和 pull 调整 col 在 sm ， md 和 lg 屏幕。

So what actually I have done is that first I design it for xs/mobile screen ... then I use push and pull to adjust the col in sm, md and lg screens.

PS 更好地使用 .img- c $ c> 类而不是 style = max-width：100％; 。

P.S. Better to use .img-responsive class instead of style=max-width: 100%;.

这篇关于bootstrap css布局不规则瓷砖 - 使用推拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！