如果元素平铺不同的高度和宽度，如何使用Bootstrap 3网格 [英] How to use Bootstrap 3 grid if elements are tiled with different height and widths

问题描述

我最近对几个项目使用了

I have used Bootstrap 3 for a couple of projects recently and love the way how simple it can work. Nevertheless I now have some questions where I don't really know how to use it. If I'm having a few divs which are tiled, I'm wondering how the best way would be to change the order, or the position within the grid on different breakpoints. I made a simple visualisation to explain my problem:

On the left hand side, you see the state on large desktops, and on the right hand side how it should look like on the next smaller breakpoint. The problems I currently have are: How would I handle the blue div on .row1, to have the red div on .row2 next to it on the right in a new row. And on the breakpoints, would it be possible for the red div, to move to another row?

I'm searching for a Bootstrap/CSS only way, but if it is definitely not working without JS/jQuery, I would appreciate those suggestions too.

Hope you get my point. Thanks!

Edit: Related image to my other question in @Danko 's answer, which was how to switch tiles on different breakpoints.

解决方案

You will need to manage the same logic but don't slice your desgin in two rows, just one:

<div class="container">
    <div class="row">
      <div class="col-md-8 col-lg-6 B"></div>
      <div class="col-md-4 col-lg-3 G"></div>
      <div class="col-md-4 col-lg-3 G"></div>
      <div class="col-md-12 col-lg-6 O"></div>
    </div>
</div>

Check this DemoBootply

这篇关于如果元素平铺不同的高度和宽度，如何使用Bootstrap 3网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！