Question

我尝试使用ionic2在每行中放入两个项目（两列），但它不起作用。

  <ion-grid>
   <ion-row wrap>
    <ion-col width-50 *ngFor="let item of items">
        <div class="myCell">
        <div class="card">

        <div class="item item-body">
        <img class="full-image" src="...">
          <div class="item item-avatar">
            <img src="...">
          </div>
          <div style="font-size:3vw;margin:2vw">    {{item.name}}</div>
        </div>
        </div>
        </div>
      </ion-col>
   </ion-row>

I use this code but it still not working, someone knows something about this difficult topic?

由于

Answer 1

Ionic使用类似于bootstrap的网格系统，它有12列。因此，如果您希望列占据宽度的50％，则每个列必须占用6列的空间（因为100％是12列）。

只需将width-50更改为col-6。

In [77]: A = np.random.randint(11,99,(10000,3))

In [78]: B = np.random.randint(11,99,(10000,3))

In [79]: v = np.random.rand(A.shape[0])>0.5

In [82]: def choose_rows_copy(A, B, v):
    ...:     C = A.copy()
    ...:     C[v] = B[v]
    ...:     return C
    ...: 

In [83]: %timeit np.where(v[:,None],B,A)
10000 loops, best of 3: 107 µs per loop

In [84]: %timeit choose_rows_copy(A, B, v)
1000 loops, best of 3: 226 µs per loop

Answer 2

   <ion-grid>
     <ion-row>
         <ion-col col-6 *ngFor="let item of items">
            <div class="myCell">
              <div class="card">
                 <div class="item item-body">
                   <img class="full-image" src="...">
                     <div class="item item-avatar">
                        <img src="...">
                     </div>
                     <div style="font-size:3vw;margin:2vw">    
                        {{item.name}}
                     </div>
                 </div>
              </div>
          </div>
       </ion-col>
     </ion-row>
   </ion-grid>

这应该解决它

Ionic2网格列

2 个答案: