代码之家 › 专栏 › 技术社区 › krish

根据条件更改引导列宽度

twitter-bootstrap angularjs css

krish · 技术社区 · 7 年前

这是我的简单引导代码。

<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>

在这里我一排放了四个盒子。我已经初始化了一个名为 myvar .基于 myVar 变量一些框可能隐藏。

所以当一个盒子被隐藏时,其他盒子的宽度应该被管理,也就是宽度应该增加。不应该有额外的空间。

如果宽度是 col-lg-3 意思是应该改成 col-lg-4 当一个盒子被藏起来的时候。

小提琴: https://jsfiddle.net/euxcj3qb/14/

怎么做?有人能给我一些建议吗?

4 回复 | 直到 7 年前

Nandita Sharma 7 年前

像这样使用它

<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>

更新 fiddle

Aleksey Solovey 7 年前

你可以用 ng-class 为此,在那里定义你的规则。一旦变量更改,它将反映任何更改。下面是一个演示:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.myVar = false;
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<style>
  .col-xs-3,
  .col-sm-3,
  .col-lg-3 {
    border: 2px solid red;
  }
  
  .col-xs-4,
  .col-sm-4,
  .col-lg-4 {
    border: 2px solid red;
  }
</style>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <div class="container">
      <div class="row">

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

    <button class="btn btn-default" ng-click="myVar = !myVar">Click
</button>

  </div>

</body>

</html>

你只需要: ng-class="{'col-lg-3':myVar, 'col-lg-4':!myVar}"

NoLimits 7 年前

您可以使用javascript来实现这一点,只需在隐藏类时更改类即可。下面是如何删除类。类似的是添加新的。例子:

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

}

krish 7 年前

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

<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>

CSS:

.expandGrid{
width:33.33334%;
}

脚本:

 $scope.myVar = true;

我能用一下吗 ng-class 随着 class 是吗?如果我错了,请纠正我。