隐藏前一列时如何保留列的位置？答案

【问题标题】：How to preserve position of a column, when hiding the previous one?隐藏前一列时如何保留列的位置？
【发布时间】：2020-07-09 19:41:06
【问题描述】：

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

 <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();
});

【问题讨论】：

不是隐藏，而是更改可见性，这将隐藏但保留它占用的空间 - 谷歌 css 可见性了解更多细节 - 看看这个：stackoverflow.com/questions/9614622/…

标签： jquery css bootstrap-4

【解决方案1】：

而不是hide 使用

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

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

【讨论】：