Question

我正在Angular项目中，在显示数据时遇到问题面对显示数据来自服务动态进入三行的问题 就像引导网格视图 例如：

 <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
     <div class="col-md-4"></div>
  </div>

我将html代码放在下面-

                <div class="container" *ngFor="let match of upcommingMatch; let i = index">
                  <div class="row">
                    <div class="col-md-6">
                      <div class="match_section">
                        <h3>{{match.tournamentName}}</h3>
                        <div class="row align-items-center">
                            <div class="col-md-4">
                              <div class="country_image">
                                <img src="{{match.team1PhotoUrl}}"/>
                              </div>
                              <p class="country_name">{{match.team1Name}}</p>
                            </div>
                            <div class="col-md-4">
                              <div class="vs">
                                <img src="../../assets/imgs/vs.png"/>
                              </div>
                            </div>
                            <div class="col-md-4">
                              <div class="country_image">
                                <img src="{{match.team1PhotoUrl}}" />
                              </div>
                              <p class="country_name">{{match.team2Name}}</p>
                            </div>
                          </div>
                          <p class="time">67h  59m  13s</p>
                          <a>Join</a>
                      </div>
                    </div>

更多信息：我正在使用Angular Material设计

我要：在图像下方显示数据

但是我当前的数据显示如下：-

（。html部分）

Answer 1

您要依次添加具有col-md-4网格类的div，因此它们（相当正确）并排显示在3列中。为了使一列数据居中，但仍在所需大小之内，您需要偏移这些列，以便引导程序可以正确得出位置。

...
<div class="col-md-4 col-md-offset-4">
    <div class="country_image">
        <img src="{{match.team1PhotoUrl}}"/>
    </div>
    <p class="country_name">{{match.team1Name}}</p>
</div>
...

这里的加法为col-md-offset-4 ...即给我一列宽4个网格正方形的列，但将其向左偏移4个网格正方形。引导行必须由12个网格正方形宽的列组成：

偏移量 4 + 内容 4 + 剩余空间 4 === 12。

否则，列并排浮动。

将服务数据显示到网格中时面临的问题

1 个答案: