英文:
How to use Bootstrap 5 to automatically transform a stack of div into a masonry layout?
问题
我正在使用blogger.com的主题模板。我希望主页上的博客文章能够像附图中所示的砌体一样。由于Blogger的限制，很难在服务器端进行计算，以便决定部署col或col-4类。此外，要在blogger.com上使用<div class='row'>来包装一个div和两个div可能会很困难。
我想我可以使用Javascript来移动这些html组件。然而，在这样做之前，我想知道是否有任何自动的方式，可以让Bootstrap将一个简单的div列表转换成像图片中显示的砌体堆叠。
英文:
I am working with a theme template for blogger.com. I would like to have the blog posts on the home page to be like a masonry as show in the attached picture. Due to limitation with Blogger, it's not easy to calculate on the server side so to help decide col or col-4 classes to be deployed. Furthermore, to wrap around one div and two div with <div class='row'> can be difficult with blogger.com.
I suppose I can use Javascript to move these html components around. However, before I do so, I am wondering if there is any automatic way where Bootstrap can transform a simple list of div into a masonry stack like shown in the picture.
答案1
得分: 0
以下是您要翻译的HTML代码的部分：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.col-sm-6:nth-child(3n+1) {
width: 100%;
}
.col-sm-6 {
border: solid 10px #ffffff;
}
</style>
</head>
<body>
<div class="container-fluid mt-3">
<div class="row">
<div class="col-12 col-sm-6 p-3 bg-primary text-white">.col</div>
<div class="col-12 col-sm-6 p-3 bg-primary text-white">.col</div>
<div class="col-12 col-sm-6 p-3 bg-primary text-white">.col</div>
<!-- 这里省略了其余的列，以保持简洁 -->
</div>
</div>
</body>
</html>
请注意，我已经将HTML代码中的特殊字符进行了解码，以便您能够查看原始HTML代码。如果您需要进一步的翻译或有其他问题，请随时提出。
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.col-sm-6:nth-child(3n+1) {
width: 100%;
}
.col-sm-6 {
border: solid 10px #ffffff;
}
</style>
</head>
<body>
<div class="container-fluid mt-3">
<div class="row">
<div class="col-12 col-sm-6 p-3 bg-primary text-white">.col</div>
<div class="col-12 col-sm-6 p-3 bg-primary text-white">.col</div>
<div class="col-12 col-sm-6 p-3 bg-primary text-white">.col</div>
<div class="col-12 col-sm-6 p-3 bg-primary text-white">.col</div>
<div class="col-12 col-sm-6 p-3 bg-primary text-white">.col</div>
<div class="col-12 col-sm-6 p-3 bg-primary text-white">.col</div>
<div class="col-12 col-sm-6 p-3 bg-primary text-white">.col</div>
<div class="col-12 col-sm-6 p-3 bg-primary text-white">.col</div>
<div class="col-12 col-sm-6 p-3 bg-primary text-white">.col</div>
<div class="col-12 col-sm-6 p-3 bg-primary text-white">.col</div>
<div class="col-12 col-sm-6 p-3 bg-primary text-white">.col</div>
<div class="col-12 col-sm-6 p-3 bg-primary text-white">.col</div>
<div class="col-12 col-sm-6 p-3 bg-primary text-white">.col</div>
<div class="col-12 col-sm-6 p-3 bg-primary text-white">.col</div>
<div class="col-12 col-sm-6 p-3 bg-primary text-white">.col</div>
<div class="col-12 col-sm-6 p-3 bg-primary text-white">.col</div>
<div class="col-12 col-sm-6 p-3 bg-primary text-white">.col</div>
<div class="col-12 col-sm-6 p-3 bg-primary text-white">.col</div>
<div class="col-12 col-sm-6 p-3 bg-primary text-white">.col</div>
<div class="col-12 col-sm-6 p-3 bg-primary text-white">.col</div>
<div class="col-12 col-sm-6 p-3 bg-primary text-white">.col</div>
<div class="col-12 col-sm-6 p-3 bg-primary text-white">.col</div>
<div class="col-12 col-sm-6 p-3 bg-primary text-white">.col</div>
<div class="col-12 col-sm-6 p-3 bg-primary text-white">.col</div>
</div>
</div>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论