我如何禁用div上的填充，而離子內容填充在離子3上

我有以下代碼。我的頁面有填充，但我想刪除div容器上的填充。我如何禁用div上的填充，而離子內容填充在離子3上

我嘗試no-padding或no-padding!important但它不起作用。

我該如何解決這個問題？謝謝。

<ion-content padding no-bounce> 

    <div class="boxContainer"> 
    <div class="box"> 
     <ion-grid text-center> 
     <ion-row> 
      <ion-col width-33> 
      ... 
      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col width-33> 
      ... 
      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col width-33> 
      ... 
      </ion-col> 
     </ion-row> 
     </ion-grid> 
    </div> 
    </div> 

</ion-content>

來源

2017-10-16 onurkaya

切勿的頁眉或看到'無padding'之前，我知道這不是有效的CSS規則，所以儘量'填充：0像素;'相反，也可能有助於將'box-sizing：border-box'應用於所有具有填充的元素，**例如：**'* {box-sizing：border-box;}'** MDN ** - https：/ /developer.mozilla.org/en-US/docs/Web/CSS/box-sizing – UncaughtTypeError

，如果你刪除'padding'而不添加任何東西..或嘗試padding =「false」 –

@TemaniAfif我想解決沒有去除填充。 – onurkaya

SOLUTION

我能不能解決就像我想要但是找到了這種方式。

我從離子填充中去除填充。並添加了除盒子之外的其他div。例如。

<ion-content no-bounce> 

    <div class="boxContainer" padding-top=""> 
    <div class="box"> 
     <ion-grid text-center> 
     <ion-row> 
      <ion-col width-33> 
      <p class="walletTextParag">Cüzdanınız:</p> 
      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col width-33> 
      <h1 class="walletText">{{ (profileData | async)?.wallet}} ₺</h1> 
      </ion-col> 
     </ion-row> 
     <ion-row> 
      <ion-col width-50> 
      <button class="walletButton" ion-button="" icon-left color="color1" (click)="seePaymentsArchive()"> 
       <ion-icon name="ios-calendar"></ion-icon> 
       Ödeme geçmişi 
      </button> 
      </ion-col> 
     </ion-row> 
     </ion-grid> 
    </div> 
    </div> 
</ion-content>

您可以輕鬆添加填充其他的div像

<div padding> 
</div>

來源

2017-10-18 16:56:04 onurkaya

-1

您可以使用屬性，如<div no-padding > </div> 或者你可以嘗試下面的代碼

ion-content .boxContainer.box 
    { 
    padding: 0 
    }

請按照以下鏈接瞭解更多支持的離子屬性Ionic website link

來源

2017-10-16 14:45:38

您需要覆蓋你想要沒有paddi的元素所應用的css NG。例如，如果由ionic添加的類是box，則添加一個自定義類，如no-padding，並覆蓋定製css文件中更具體的CSS規則中定義的填充。

喜歡的東西：

div.box.no-padding { 
    padding: 0 !important; 
}

你甚至不需要添加!important標籤，如果離子沒有在box類使用!important

來源

2017-10-16 14:47:56

它不起作用。 – onurkaya

你能分享一個小提琴嗎？想看看你的代碼是什麼樣子 –

我不知道如何創建一個離子小提琴:(但如果你知道離子我可以發送github鏈接也許？ – onurkaya

我如何禁用div上的填充，而離子內容填充在離子3上

回答

相關問題