как правильно использовать колонки начальной загрузки? - PullRequest
Новая
       6

как правильно использовать колонки начальной загрузки?

0 голосов
/ 04 сентября 2018

У меня есть веб-страница angularjs с начальной загрузкой. Я пытаюсь использовать загрузочные карты. Я выбрал класс загрузочных карт-колонок, но у меня возникла проблема. При добавлении четвертого секвенция изменится на card-colums: 2, но по умолчанию card-colums: 3.

У JSFiddle https://jsfiddle.net/fdbwyoc7

angular.module("app", []).controller("bdCtrl", function($scope) {
  $scope.cards = [{}];
  $scope.appendCard = function() {
    $scope.cards.push({});
  };
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js"></script>
<body ng-app="app" ng-controller="bdCtrl">
  <button class="btn btn-warning" ng-click="appendCard()">Add new</button>
  <br>
  <div class="container-fluid">
    <div class="card-columns" style="column-count: 3;">
      <div class="card" ng-repeat="rd in cards">
        <img class="card-img-top" src="https://www.direnc.net//3d-printer-prusa-i-3-demonte-3d-printer-eitleri-china-19324-99-O.jpg" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
      </div>
    </div>
  </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...