Bootstrap 网格系统 - 根据大小使列更改行
Bootstrap grid system - make column change row depending on size
我正在尝试获得一个行为类似于此页面上的网格系统:http://weibergmedia.com/demos/yk
您可以看到网格根据 window 大小完全重新排列;保留列大小,直到它们基本上是 col-xs-12,这时 windows 大小非常小。
任何让我朝着正确方向工作的指示都将不胜感激。我现在能想到的就是写一个复杂的 javascript 来复制行为。
您可以使用同位素实现此目的。
将它与 Bootstrap 网格系统一起使用将如下所示:
var elem = document.querySelector('.grid');
var iso = new Isotope( elem, {
// options
itemSelector: '.grid-item',
percentPosition: true
});
.box {
background-color: tomato;
width: 100%;
height: 100%;
}
.grid-item {
height: 255px;
margin-bottom: 30px;
}
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
<div class="row grid">
<div class="grid-item col-sm-3">
<div class="box">Box 1</div>
</div>
<div class="grid-item col-sm-3 col-lg-6">
<div class="box">Box 2</div>
</div>
<div class="grid-item col-sm-3">
<div class="box">Box 3</div>
</div>
<div class="grid-item col-sm-3 col-md-6">
<div class="box">Box 4</div>
</div>
<div class="grid-item col-sm-3">
<div class="box">Box 5</div>
</div>
<div class="grid-item col-sm-3">
<div class="box">Box 6</div>
</div>
</div>
</div>
我正在尝试获得一个行为类似于此页面上的网格系统:http://weibergmedia.com/demos/yk
您可以看到网格根据 window 大小完全重新排列;保留列大小,直到它们基本上是 col-xs-12,这时 windows 大小非常小。
任何让我朝着正确方向工作的指示都将不胜感激。我现在能想到的就是写一个复杂的 javascript 来复制行为。
您可以使用同位素实现此目的。 将它与 Bootstrap 网格系统一起使用将如下所示:
var elem = document.querySelector('.grid');
var iso = new Isotope( elem, {
// options
itemSelector: '.grid-item',
percentPosition: true
});
.box {
background-color: tomato;
width: 100%;
height: 100%;
}
.grid-item {
height: 255px;
margin-bottom: 30px;
}
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
<div class="row grid">
<div class="grid-item col-sm-3">
<div class="box">Box 1</div>
</div>
<div class="grid-item col-sm-3 col-lg-6">
<div class="box">Box 2</div>
</div>
<div class="grid-item col-sm-3">
<div class="box">Box 3</div>
</div>
<div class="grid-item col-sm-3 col-md-6">
<div class="box">Box 4</div>
</div>
<div class="grid-item col-sm-3">
<div class="box">Box 5</div>
</div>
<div class="grid-item col-sm-3">
<div class="box">Box 6</div>
</div>
</div>
</div>