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文件中，以便全局生效。像下面这样的东西应该有效。

适用于iOS

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

对于Android

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

适用于Windows Phone

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

从离子卡侧面移除间距

1 个答案: