Bootstrap div隐藏其他网格时自动调整大小

Question

嗨，我有两个Bootstrap div

<div class="row">
    <div class="col-sm-6" style="background-color:yellow;">
     Grid 1
    </div>
    <div  class="col-sm-6" style="background-color:pink;">
      Grid 2    
    </div>
  </div>
</div>

当我隐藏（可见性：隐藏）之一时，我需要

之类的结果

使用Bootstrap网格系统或使用jquery和all可以做到这一点吗？请帮助如何实现。

Answer 1

使用Flex

<div class="container-fluid">
  <div class="row d-flex">
    <div class="col" style="background-color:yellow;">
     Grid 1
    </div>
    <div  class="col" style="background-color:pink;">
      Grid 2    
    </div>
  </div>
  <div class="row d-flex">
    <div class="col" style="background-color:yellow;">
     Grid 1
    </div>
    <div  class="col" style="background-color:pink; display:none">
    Grid 2    
   </div>
 </div>
</div>

也visibility:hidden至display:none

https://jsfiddle.net/lalji1051/bx8j06h1/5/

Answer 2

与问题想要的答案不太相同，但是来到这里寻找如何根据另一个元素的状态调整元素的大小。对于使用角度的任何人，请参见ng-class指令

<div ng-class="vm.someFlag? 'col-sm-12' : 'col-sm-8'">