Question

我正在尝试使用Bootstrap 4在3列中显示一些对象。使用此代码时，它只显示在1列中，如下所示：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>

我想学习使用Bootstrap类进行对象定位。

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

Bootstrap在列中动态定位对象

1 个答案: