去除离子卡侧面的间距

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

您可以通过覆盖 Ionic API 文档中提供的 sass 变量来做到这一点。您可以将代码放在您的app.scss 或theme/variables.scss 文件中，以便全局生效。像下面这样的东西应该可以工作。

1. 对于 iOS

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

2. 适用于安卓

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

3. 对于 Windows 手机

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