當離子內容在 Ionic 3 上有填充時，如何禁用 div 上的填充

Question

我有以下代碼。 我的頁面有填充，但我想刪除 div 容器上的填充。

我嘗試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>

Answer 1

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

類似的東西：

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

如果 ionic 在box類中不使用!important ，您甚至可能不需要添加!important標簽

Answer 2

解決方案

我無法像我想要的那樣解決這個問題，但找到了這種方式。

我從離子填充中刪除了填充。 並添加了除 box 之外的其他 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>

Answer 3

我使用以下方法解決了它：

<ion-content class="ion-padding-left ion-padding-right ion-padding-bottom">

Answer 4

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

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

請按照以下鏈接獲取更多支持的離子屬性離子網站鏈接