我一直在使用 bootstrap 寻找 vue 3 框架下砌体布局的解决方案,但没有成功。使用 bootstrap 5 卡与砌体 CDN挤压并重叠卡片,但仍然没有呈现预期的布局。也许我错过了什么。非常感谢任何帮助。
编辑:
- Here是包含一些数据的代码沙箱。
- HTML example与 codeply。
这是我的代码的一部分:
<template>
<div class="container">
<div class="row justify-content-center" data-masonry='{"percentPosition": true }'>
<div class="col-lg-3 col-md-4 col-sm-col" v-for="(newsPiece, index) in newsCollection" :key="index">
<div class="card shadow-sm mt-3 mx-1">
<img :src="newsPiece.urlToImage" alt="image link lost" data-bs-toggle="collapse"
:data-bs-target="'#collapseImage'+index">
<h5><a :href="newsPiece.url" target="_blank">{{ newsPiece.title }}</a></h5>
<div class="collapse" :id="'collapseImage'+index">
<div class="card-body-noborder">
<span v-html="newsPiece.description"></span>
</div>
</div>
<div class="card-footer">
{{ newsPiece.publishedAt.replace('T',' ').replace('Z','') }}
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.card {
width: 13rem;
border-radius:10px;
}
.row {
padding: 0 15%;
}
h5 {
font-size: 1rem;
}
.card-footer {
font-size: 1rem;
}
@media screen and (max-width:600px) {
.card {
width: 20rem;
border-radius:10px;
}
h5 {
font-size: 1.2rem;
}
}
</style>
最佳答案
要将 Masonry 与 Vue 一起使用,您需要...
- 将其作为依赖项安装...
npm install masonry-layout
- 导入它...
import Masonry from "masonry-layout"
- 最后,在您的 Vue 组件中初始化它...
...
mounted() {
// initialize masonry
var row = document.querySelector("[data-masonry]");
new Masonry(row, {
// options
percentPosition: true,
});
},
...
关于html - Vue 3 砖石布局与 Bootstrap 5 结合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68306166/