Question

如何使用angular 5和bootstrap网格创建下面的网格。名称将来自数组。

名称1名称4名称7
名称2名称5名称8
名称3名称6名称9

Answer 1

您可以通过以下方式使用row和col：

<div class="row">
  <div class="col-4">Name 1</div>
  <div class="col-4">Name 2</div>
  <div class="col-4">Name 3</div>
</div>
<div class="row">
  <div class="col-4">Name 5</div>
  <div class="col-4">Name 6</div>
  <div class="col-4">Name 7</div>
</div>
<div class="row">
  <div class="col-4">Name 8</div>
  <div class="col-4">Name 9</div>
  <div class="col-4">Name 0</div>
</div>

或者您可以通过这种方式使用ngFor

<div class="row">
  <div class="col-4" *ngFor="let user of Users">
    {{user.name}}
  </div>
</div>

如果要每列显示3个项目，则必须将Array结构更改为：

export Class User {
  public name1: string;
  public name2: string;
  public name3: string;
}

然后您的User[]将像这样：

this.myUserList:User[] = [
  {
    name1 = "Mark",
    name2 = "John",
    name3 = "Matt",
  },
  {
    name1 = "Mark1",
    name2 = "John1",
    name3 = "Matt1",
  },
  {
    name1 = "Mark2",
    name2 = "John2",
    name3 = "Matt2",
  }  
];

最后，您的ngFor会像这样

<div class="row">
    <div class="col-4" *ngFor="let user of Users">
        {{user.name1}}{{user.name2}}{{user.name3}}
    </div>
</div>

Answer 2

这里是fiddle，使用隐藏和可见的类来实现所需的结果。

Desktop View

<div class="col-md-6 col-lg-4">
  <div class="row">
  <div class="col-sm-12">Name 1</div>
  <div class="col-sm-12">Name 2</div>
  <div class="col-sm-12">Name 3</div>
  <div class="col-sm-12">Name 4</div>
  </div>
</div>
<div class="col-md-6 col-lg-4 hidden-md">
  <div class="row">
 <div class="col-sm-12">Name 5</div>
  <div class="col-sm-12">Name 6</div>
  <div class="col-sm-12">Name 7</div>
  <div class="col-sm-12">Name 8</div>
  </div>
</div>

如何使用角度5创建网格

2 个答案: