jquery - 隐藏前一列时如何保留列的位置？

Question

我有一排三列和一个按钮。当我点击一个按钮时，第二列隐藏，第三列取代它。如何强制第三列保持在隐藏第二列之前的相同位置？这是我的代码：

 <div class="row">
  <div class="col-3">
   Column 1
  </div>
  <div class="col-3 test">
   Column 2
  </div>
  <div class="col-3">
   Column 3
  </div>
 </div>
<button id="btn">
 Hide column 3
</button>

$('#btn').click(function(){
 $('.test').hide();
});

标签： jquerycssbootstrap-4

Answer 1

而不是hide使用

 $('.test').css('visibility', 'hidden');

你也可以使用.css('opacity', '0')