bootstrap 5.0 弹性盒子布局 - 动态切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Smart Grid with Toggle</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.item {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
.inner-content {
border: 1px solid #000;
padding: 10px;
}
.links {
margin-bottom: 20px;
}
.columns-2 .col {
flex: 0 0 50%;
max-width: 50%;
}
.columns-3 .col {
flex: 0 0 33.3333%;
max-width: 33.3333%;
}
.columns-4 .col {
flex: 0 0 25%;
max-width: 25%;
}
.columns-5 .col {
flex: 0 0 20%;
max-width: 20%;
}
.columns-6 .col {
flex: 0 0 16.6667%;
max-width: 16.6667%;
}
@media (max-width: 576px) {
.columns-2 .col, .columns-3 .col {
flex: 0 0 100%;
max-width: 100%;
}
.columns-4 .col, .columns-5 .col, .columns-6 .col {
flex: 0 0 50%;
max-width: 50%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="links">
<a href="#" onclick="setColumns(2)">2 Columns</a> |
<a href="#" onclick="setColumns(3)">3 Columns</a> |
<a href="#" onclick="setColumns(4)">4 Columns</a> |
<a href="#" onclick="setColumns(5)">5 Columns</a> |
<a href="#" onclick="setColumns(6)">6 Columns</a>
</div>
<div class="links">
<a href="#" onclick="setPadding(0)">Padding 0px</a> |
<a href="#" onclick="setPadding(10)">Padding 10px</a> |
<a href="#" onclick="setPadding(20)">Padding 20px</a> |
<a href="#" onclick="setPadding(30)">Padding 30px</a>
</div>
<div class="links">
<a href="#" onclick="setMargin(-0)">Margin 0px</a> |
<a href="#" onclick="setMargin(-10)">Margin -10px</a> |
<a href="#" onclick="setMargin(-20)">Margin -20px</a> |
<a href="#" onclick="setMargin(-30)">Margin -30px</a> (Full-container)
</div>
<div id="gridContainer" class="row columns-6">
<div class="col item"><div class="inner-content">1</div></div>
<div class="col item"><div class="inner-content">2</div></div>
<div class="col item"><div class="inner-content">3</div></div>
<div class="col item"><div class="inner-content">4</div></div>
<div class="col item"><div class="inner-content">5</div></div>
<div class="col item"><div class="inner-content">6</div></div>
<div class="col item"><div class="inner-content">7</div></div>
<div class="col item"><div class="inner-content">8</div></div>
<div class="col item"><div class="inner-content">9</div></div>
<div class="col item"><div class="inner-content">10</div></div>
<div class="col item"><div class="inner-content">11</div></div>
<div class="col item"><div class="inner-content">12</div></div>
<div class="col item"><div class="inner-content">13</div></div>
<div class="col item"><div class="inner-content">14</div></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
function setColumns(columns) {
var gridContainer = document.getElementById('gridContainer');
gridContainer.className = 'row columns-' + columns;
}
function setPadding(padding) {
var items = document.querySelectorAll('.item');
items.forEach(function(item) {
item.style.padding = padding + 'px';
});
}
function setMargin(margin) {
var gridContainer = document.getElementById('gridContainer');
gridContainer.style.marginLeft = margin + 'px';
gridContainer.style.marginRight = margin + 'px';
}
</script>
</body>
</html>
点击按钮切换布局 2/3/4/5/6列 （支持手机端切换为1/2 列）
在线演示：