ブートストラップの位置は列にdinamicallyオブジェクト

Question

このように、それだけで1列に表示されます。このコードを使用している場合、私はブートストラップ4を使用して3列にいくつかのオブジェクトを表示しようとしている：web 1 column.

をしかし、私のアイデアが表示されますこのように（多かれ少なかれ）：web template 3 columns。

<div class="row-mt-5"> 
      <div ng-repeat="woman in women"> 
      <div class= "col-lg-4"> 
       <!--Card--> 
        <div class="card"> 
         <!--Card image--> 
         <img class="img-fluid" ng-src="{{woman.image_url}}" alt="{{woman.name}}"> 
         <!--Card content--> 
         <div class="card-body"> 
          <!--Title--> 
          <h4 class="card-title">{{woman.name}}</h4> 
          <!--Text--> 
          <p class="card-text"> <h5>{{woman.field}}</h5> <br> {{woman.job}}</p> 
          <a href="#!/women/details/{{woman._id}}" class="btn btn-primary">Learn more</a> 
         </div> 
        </div> 
        <!--/.Card--> 
      </div> 
      </div> 
     </div> 

私は、オブジェクトの配置にブートストラップクラスを使用する方法を学びたいと考えています。ありがとうございました:)あなたは、基本的なレイアウト構造について知っておく必要があります

Answer 1

まず、learn it here、詳細は中に発見された（SM MD LG XL）あなたはすべての画面のためのグリッドレイアウトを定義する必要がありますのでご注意くださいリンクが提供されます。あなたの問題のためのコード修正を下記のフィドルを参照してください。私はng-appとng-controllerをテスト目的に含めましたが、無視してください。

HTML：

<div class="container-fluid" ng-app="myApp" ng-controller="MyController"> 
    <div class="row"> 
    <div class= "col-4 col-sm-4 col-md-4 col-lg-4" ng-repeat="woman in women"> 
     <!--Card--> 
     <div class="card"> 
     <!--Card image--> 
     <img class="img-fluid" ng-src="{{woman.image_url}}" alt="{{woman.name}}"> 
     <!--Card content--> 
     <div class="card-body"> 
      <!--Title--> 
      <h4 class="card-title">{{woman.name}}</h4> 
      <!--Text--> 
      <p class="card-text"> 
      <h5>{{woman.field}}{{woman.job}}</h5> 
      </p> 
     <a href="#!/women/details/{{woman._id}}" class="btn btn-primary">Learn more</a> 
     </div> 
    </div> 
    <!--/.Card--> 
    </div> 
</div> 

JSFiddle：here