Question

作为一个学校项目，我正在创建一个类似Google Keep的网站，您可以在其中创建和共享笔记。要显示现有注释，我使用Bootstraps容器，行和卡片。在删除一个元素之前，该方法可以正常工作，这会在旧元素所在的位置产生间隙。如何消除间隙并使元素移动以填补间隙？

元素是：

<div class="col-sm-4">
</div>

预先感谢，尼基塔（Nikita）

Answer 1

最简单的解决方案可能是不将每个 n 个音符包装在.row元素中。如果这样做，这些卡将自行回流。

尽管没有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>

元素删除后的HTML移动元素

1 个答案: