隐藏前一列时如何保留列的位置?

Posted

技术标签:

【中文标题】隐藏前一列时如何保留列的位置?【英文标题】: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 可见性了解更多细节 - 看看这个:***.com/questions/9614622/… 【参考方案1】:

而不是hide 使用

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

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

【讨论】:

以上是关于隐藏前一列时如何保留列的位置?的主要内容,如果未能解决你的问题,请参考以下文章