在bootstrap 4中，如果通过jquery隐藏和显示列丢失了flex

Question

使用bootstrap 3，我可以使用CSS隐藏一行并使用jquery显示它。如果我使用bootstrap4进行操作，则列丢失的行会变通。

为什么这样？有解决这个问题的办法吗？我为bs3写了很多代码！

 .nascosto{display:none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div onClick='$("#test").show()'>test</div>
    
    <div class="container">
    <div class="row nascosto" id="test">
    
    
    <div class="col-12 col-sm-6 col-md-3">
    content
    </div>
    
    <div class="col-12 col-sm-6 col-md-3">
    content
    </div>
    
    <div class="col-12 col-sm-6 col-md-3">
    content
    </div>
    
    <div class="col-12 col-sm-6 col-md-3">
    content
    </div>
    
    </div>
    </div>

如果单击“测试”，则该列不再弯曲。

仅在bs4中，在3中始终有效

Answer 1

此问题来自使用show()显示该行。 show()制作元素块，但您需要将其变为弹性。

因此，您可以尝试使用$("#test").css('display', 'flex')

应该可以解决问题。

它在Bootstrap 3中起作用，因为据我所知，Bootstrap <4使用浮点数表示网格。

Answer 2

您可以使用Jquery管理可见性。

$('#testHeader').on('click',function(){

  if(!$('#test').is(":visible"))
  {
    $("#test").show()
  }
  else
  {
    $("#test").hide()
  }

})

.nascosto{display:none}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  id="testHeader">test</div>
    
    <div class="container">
    <div class="row nascosto" id="test">
        
    <div class="col-12 col-sm-6 col-md-3">
    content
    </div>
    
    <div class="col-12 col-sm-6 col-md-3">
    content
    </div>
    
    <div class="col-12 col-sm-6 col-md-3">
    content
    </div>
    
    <div class="col-12 col-sm-6 col-md-3">
    content
    </div>
    
    </div>
    </div>

Answer 3

DEMO：https://jsfiddle.net/t5wo74rd/

测试

<div class="container">
<div class="nascosto" id="test">   

<div class="row">


<div class="col-12 col-sm-6 col-md-3">
content
</div>

<div class="col-12 col-sm-6 col-md-3">
content
</div>

<div class="col-12 col-sm-6 col-md-3">
content
</div>

<div class="col-12 col-sm-6 col-md-3">
content
</div>

</div>
</div>
</div>

。nascosto {display：none}