Css 根据条件更改引导列的列宽度

这是我的简单引导代码

<div class="container">
<div class="col-lg-12">

  <div class="col-lg-3">
    <p>
    aaaaaa
    </p>
  </div>
  <div class="col-lg-3">
    <p>
    bbbbb
    </p>
  </div>
  <div class="col-lg-3" ng-show="myVar">
    <p>
    cccccc
    </p>
  </div>
   <div class="col-lg-3">
    <p>
    bbbbb
    </p>
  </div>
</div>
</div>

AAAAA


bbbbb


中交


bbbbb

在这里，我已经把4个盒子排成一行。 我已经初始化了一个名为

myvar

的变量。基于

myvar

变量，一些框可能会隐藏

因此，当一个框被隐藏时，其他框的宽度应该被管理，即宽度应该增加。不应该有额外的空间

如果宽度为

col-lg-3

，则表示在隐藏框时应将其更改为

col-lg-4

小提琴：

如何做到这一点？谁能给我一些建议吗？

像这样使用它

<div class="container" ng-app="myApp">
<div class="col-lg-12" ng-controller="myController">

  <div class="col-xs-12 col-sm-6 col-md-4"  ng-class="{' col-lg-3': myVar, ' col-lg-4': !myVar}">
    <p>
    aaaaaa
    </p>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4"  ng-class="{' col-lg-3': myVar, 'col-lg-4': !myVar}">
    <p>
    bbbbb
    </p>
  </div>
  <div class="" ng-show="myVar" ng-class="{' col-lg-3': myVar}">
    <p>
    cccccc
    </p>
  </div>
   <div class="col-xs-12 col-sm-6 col-md-4 "  ng-class="{'col-lg-3': myVar, ' col-lg-4': !myVar}">
    <p>
    bbbbb
    </p>
  </div>
</div>
</div>

AAAAA


bbbbb


中交


bbbbb

更新的

像这样使用它

<div class="container" ng-app="myApp">
<div class="col-lg-12" ng-controller="myController">

  <div class="col-xs-12 col-sm-6 col-md-4"  ng-class="{' col-lg-3': myVar, ' col-lg-4': !myVar}">
    <p>
    aaaaaa
    </p>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4"  ng-class="{' col-lg-3': myVar, 'col-lg-4': !myVar}">
    <p>
    bbbbb
    </p>
  </div>
  <div class="" ng-show="myVar" ng-class="{' col-lg-3': myVar}">
    <p>
    cccccc
    </p>
  </div>
   <div class="col-xs-12 col-sm-6 col-md-4 "  ng-class="{'col-lg-3': myVar, ' col-lg-4': !myVar}">
    <p>
    bbbbb
    </p>
  </div>
</div>
</div>

AAAAA


bbbbb


中交


bbbbb

---

更新的

您可以使用

ng类

进行此操作，并在其中定义您的规则。变量更改后，它将反映任何更改。下面是一个演示：

var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.myVar=false；
});

.col-xs-3，
.col-sm-3，
.col-lg-3{
边框：2倍纯红；
}
.col-xs-4，
col-sm-4，
.col-lg-4{
边框：2倍纯红；
}

AAAAA


bbbbb


中交


bbbbb

点击
您可以为此使用
ng类
，并在其中定义规则。变量更改后，它将反映任何更改。下面是一个演示：


var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.myVar=false；
});

.col-xs-3，
.col-sm-3，
.col-lg-3{
边框：2倍纯红；
}
.col-xs-4，
col-sm-4，
.col-lg-4{
边框：2倍纯红；
}

AAAAA


bbbbb


中交


bbbbb

点击
您可以使用JavaScript实现这一点，只需在隐藏类时更改类即可。下面是如何删除类。类似的情况也适用于添加新的。例如：

function myFunction() {
    var element = document.getElementById("myDIV");
    element.classList.remove("mystyle");

}

您可以使用JavaScript实现这一点，只要在隐藏类时更改类即可。下面是如何删除类。类似的情况也适用于添加新的。例如：

function myFunction() {
    var element = document.getElementById("myDIV");
    element.classList.remove("mystyle");

}

谢谢大家的回答。这给了我一个简短的预期结果

<div class="container">
<div class="col-lg-12">

  <div class="col-lg-3" ng-class={'expandGrid':myVar }>
    <p>
    aaaaaa
    </p>
  </div>
  <div class="col-lg-3" ng-class={'expandGrid':myVar }>
    <p>
    bbbbb
    </p>
  </div>
  <div class="col-lg-3" ng-show="myVar" >
    <p>
    cccccc
    </p>
  </div>
   <div class="col-lg-3" ng-class={'expandGrid':myVar }>
    <p>
    bbbbb
    </p>
  </div>
</div>
</div>

脚本：

 $scope.myVar = true;

我可以将
ng class
与
class
一起使用吗？如果我错了，请纠正我。
谢谢大家的回答。这给了我一个简短的预期结果

<div class="container">
<div class="col-lg-12">

  <div class="col-lg-3" ng-class={'expandGrid':myVar }>
    <p>
    aaaaaa
    </p>
  </div>
  <div class="col-lg-3" ng-class={'expandGrid':myVar }>
    <p>
    bbbbb
    </p>
  </div>
  <div class="col-lg-3" ng-show="myVar" >
    <p>
    cccccc
    </p>
  </div>
   <div class="col-lg-3" ng-class={'expandGrid':myVar }>
    <p>
    bbbbb
    </p>
  </div>
</div>
</div>

脚本：

 $scope.myVar = true;

我可以将
ng class
与
class
一起使用吗？如果我错了，请纠正我。
如果您希望使用var更改类，是否需要对类执行某种ng If操作？或者一个ng类：我如何在css类的帮助下做到这一点？那就是添加和删除css类？如果你想让类随变量变化，你不需要在类上做一些ng吗？或者一个ng类：我怎样才能在css类的帮助下做到这一点？那就是添加和删除css类？我已经添加了这样的类
class=“col-xs-12 col-sm-6 col-md-4 col-lg-3”
我如何在这里使用ng类？在ng类中也添加它们！查看更新的Fiddle此
col-xs-12 col-sm-6 col-md-4
在这两种情况下都很常见？非常感谢。请检查我的答案。我已经添加了这样的类
class=“col-xs-12 col-sm-6 col-md-4 col-lg-3”
我如何在这里使用ng类？在ng类中也添加它们！请参阅更新的Fiddle此
col-xs-12 col-sm-6 col-md-4
在两种情况下都是常见的？非常感谢。请检查我的答案。是的，您可以同时使用这两种答案…但是关于您的答案，请尽量避免您自己的风格干扰引导的网格。它现在可以工作，但以后会产生严重的问题！是的，您可以同时使用这两种方法…但是关于您的答案，请尝试避免您自己的风格干扰引导的网格。它现在可以工作，但以后会产生严重的问题！