我们如何在 bootstrap 的帮助下显示动态网格布局，如所附屏幕截图一样按数字排序

Question

我想制作一个布局，如附件 image.Blocks 将以相同的订单号呈现在页面上。

例如：- 块 (1) 将首先显示，然后块 (2) 等等...

Answer 1

Masonry 是处理此问题的流行 JS 库：http://masonry.desandro.com/

假设您的 HTML 看起来像这样：

<div id="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <!-- More items... -->
</div>

JS 看起来像这样：

var msnry = new Masonry('#container', {
    columnWidth: 200,
    itemSelector: '.item'
});

或者如果你喜欢 jQuery:

$('#container').masonry({
    columnWidth: 200,
    itemSelector: '.item'
});

Answer 2

啊！下面这个完美。 Check this bootply i quickly did。

<div class="col-sm-3">
  <div class="col-sm-12">1</div>
  <div class="col-sm-12">5</div>
</div>
<div class="col-sm-3">
    <div class="col-sm-12">2</div>
    <div class="col-sm-12">6</div>
</div>
<div class="col-sm-3">
    <div class="col-sm-12">3</div>
    <div class="col-sm-12">7</div>
</div>
<div class="col-sm-3">
    <div class="col-sm-12">4</div>
    <div class="col-sm-12">8</div>
</div>

I know you will want to push and pull once you want to rearrange the order of the div in extra small screen so this is a link to push and pull very well answered on Stack Overflow.

我们如何在 bootstrap 的帮助下显示动态网格布局，如所附屏幕截图一样按数字排序

How can we display dynamic grid layout like the attached screenshot also order by number with the help of bootstrap

html

css

php

twitter-bootstrap

zurb-foundation