2017-07-15 86 views
1

我想創建佈局波紋管,我試圖使用css padding: 0;但我仍然得到一些填充和邊距。第二個圖像是我所得到的。爲佈局如何在Ionic3中創建此佈局

<ion-content class="home"> 
    <ion-grid> 
     <ion-row> 
     <ion-col> 
      <img src="assets/Instrumentitem1.png" alt=""> 
      <p>Bass</p> 
     </ion-col> 
     </ion-row> 
     <ion-row > 
     <ion-col> 
      <img src="assets/Instrumentitem2.png" alt=""> 
      <p>Cello</p> 
     </ion-col> 
     </ion-row> 
     <ion-row> 
     <ion-col> 
      <img src="assets/Instrumentitem3.png" alt=""> 
      <p>Viola</p> 
     </ion-col> 
     </ion-row> 
    </ion-grid> 
</ion-content> 

對於我這個造型代碼 是我做了什麼。我也嘗試刪除圖像上的填充和邊距,但我得到了相同的結果。

.home{ 
     scroll-content{ 
     display: flex; 
     flex-direction: column; 
     } 
    ion-grid{ 
     padding: 0; 
    } 
    ion-row{ 
     flex: 1; 
    } 
    img{ 
    } 
    p{ 
    position: absolute; 
    color: white; 
    font-size: 3em; 
    font-weight: bold; 
    top: 10%; 
    right: 20%; 
    } 
    } 

Scree One what I woollike to achive

enter image description here

回答

3

您可以使用no-padding屬性網格元素,像這樣:

<ion-grid no-padding>...</ion-grid> 

既然...

從網格和直接的子列刪除填充。

你可以在Ionic docs找到更多的信息。

+1

非常感謝它的工作問問題。 –

+0

可以幫我解決這個問題https://stackoverflow.com/questions/45128929/tabs-not-showing-after-changing-the-rootpage-in-ionic3。 –