изменить ширину бутстрапа в зависимости от условий - PullRequest
Новая
       6

изменить ширину бутстрапа в зависимости от условий

0 голосов
/ 25 июня 2018

Это мой простой код начальной загрузки .. 

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

Здесь я разместил 4 коробки подряд. Я инициализировал переменную с именем myvar. Основанный на переменной myVar, некоторые поля могут скрываться.

Таким образом, когда коробочка скрыта, необходимо управлять шириной других ящиков, то есть шириной. не должно быть лишних пробелов.

Если ширина col-lg-3 означает, что она должна быть изменена на col-lg-4, когда ящик скрыт.

скрипка: https://jsfiddle.net/euxcj3qb/14/

Как это сделать? Кто-нибудь может дать мне несколько советов?

Ответы [ 4 ]

0 голосов
/ 25 июня 2018

Спасибо всем за ваши ответы. Это дало мне короткий и ожидаемый результат 

<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%;
}

Сценарий: * +1007 * 

 $scope.myVar = true;

Могу ли я использовать ng-class вместе с class? Пожалуйста, поправьте меня, если я ошибаюсь.

0 голосов
/ 25 июня 2018

Вы можете использовать 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}"

0 голосов
/ 25 июня 2018

Вы можете использовать JavaScript для этого, просто измените класс, когда он скрыт. Вот как удалить класс. Подобное для добавления нового. Пример: 

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

}
0 голосов
/ 25 июня 2018

Используйте это так 

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

Обновлено Скрипка

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...