作为一个学校项目,我正在创建一个像Google Keep这样的网站,在那里你可以创建和分享笔记。为了显示现有笔记,我使用Bootstraps容器、行和卡片。这很好用,直到一个元素被删除,这在旧元素所在的位置创建了一个间隙。如何删除间隙并使元素移动以填充间隙?
这些元素包括:
<div class="col-sm-4">
</div>
提前谢谢你,尼基塔
发布于 2018-12-14 06:27:00
最简单的解决方案可能是在一个.row
元素中对每n个注释进行而不是包装。如果你这样做,卡片将会自动回流。
虽然没有MCVE很难给出直接的答案。
// Demo code to illustrate card removal.
$( function () {
$( '.notes' ).on( 'click', '.card', function ( e ) {
$( this ).parent().remove();
} );
} );
.card {
margin-bottom: 1rem;
padding: 2rem 4rem;
text-align: center;
cursor: pointer;
}
.card:hover {
background-color: #eaeaea;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
<div class="container notes">
<div class="row">
<div class="col col-sm-4">
<div class="card">1</div>
</div>
<div class="col col-sm-4">
<div class="card">2</div>
</div>
<div class="col col-sm-4">
<div class="card">3</div>
</div>
<div class="col col-sm-4">
<div class="card">4</div>
</div>
<div class="col col-sm-4">
<div class="card">5</div>
</div>
<div class="col col-sm-4">
<div class="card">6</div>
</div>
<div class="col col-sm-4">
<div class="card">7</div>
</div>
<div class="col col-sm-4">
<div class="card">8</div>
</div>
<div class="col col-sm-4">
<div class="card">9</div>
</div>
<div class="col col-sm-4">
<div class="card">10</div>
</div>
</div>
</div>
https://stackoverflow.com/questions/53770639
复制相似问题