从离子卡侧面移除间距

Question

我试图从我的离子卡两侧去除间距,使它们100%宽度.到目前为止,我已经尝试了所有我能想象的但是卡尔德拒绝设置为100%的宽度.到目前为止这是我的代码:

<ion-content class="Content">

 <ion-card  *ngFor='let rest of modifiedData' (click)="itemSelected(rest.PushPage)"  >
  <img src={{rest.image}}/>
  <ion-card-content>
    <ion-card-title>
     <h1>{{rest.name}}</h1> 
      </ion-card-title>
    <p>{{rest.text}}</p>
  </ion-card-content>
</ion-card> 


  <!-- floating button for maps page -->
   <ion-fab right bottom >
   <button ion-fab color="frosted" (click)="Locations()" mini><ion-icon name="pin"></ion-icon></button>
 </ion-fab>
</ion-content>

而我的css:

page-content {

    .scroll-content {
        padding-top: 0 !important;
    }

    .main-content {
        background-color: (darkish);
        box-shadow: 0px -1px 13px 1px rgba(0,0,0,0.3);
    }
    ion-card {
        background-color: #fff;
        width: 100%;
        margin: 0;
        margin-bottom: 25px;
        position: relative;
    }


    ion-item {
        background-color: #fff;
    }
}

任何帮助非常感谢!

Answer 1

您可以通过覆盖sassIonic API文档中提供的变量来完成此操作.您可以将代码放在您的app.scss或theme/variables.scss文件中,以便它具有全局效果.像下面的东西应该工作.

1. 对于iOS

    $card-ios-margin-left: 0;
    $card-ios-margin-right: 0;
   

2. 对于Android

    $card-md-margin-left: 0;
    $card-md-margin-right: 0;
   

3. 对于Windows Phone

    $card-wp-margin-left: 0;
    $card-wp-margin-right: 0;