我如何禁用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>

切勿的页眉或看到'无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>

答

您可以使用属性，如<div no-padding > </div> 或者你可以尝试下面的代码

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

请按照以下链接了解更多支持的离子属性Ionic website link

答

您需要覆盖你想要没有paddi的元素所应用的css NG。例如，如果由ionic添加的类是box，则添加一个自定义类，如no-padding，并覆盖定制css文件中更具体的CSS规则中定义的填充。

喜欢的东西：

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

你甚至不需要添加!important标签，如果离子没有在box类使用!important

它不起作用。 – onurkaya

你能分享一个小提琴吗？想看看你的代码是什么样子 –

我不知道如何创建一个离子小提琴:(但如果你知道离子我可以发送github链接也许？ – onurkaya

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

相关推荐