Question

我有一个带有bootstrap的angularjs网页。我正在尝试使用引导卡。我选择了bootstrap card-columns类，但是遇到了问题。添加第四个后，顺序将更改为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>

如何正确使用引导卡栏？

0 个答案: