如何调整离子卡的长度？

Question

好吧，我想标准化与上面相同的宽度，但是我什么也没做……我尝试过边距，宽度和其他，但是如果要更改卡的大小，则没有办法。我想保留默认值，您是否向我推荐一些命令，或者我做错了？我做的所有CSS命令都在home.scss中，谢谢大家。

在这里观看我的应用程序的打印

page-home {

  .bg{
    background: linear-gradient(to bottom, #00A399 0%, #fafafa 400%);
  }

  .bg-ions{
    background:#000;
    opacity:0.2;
  }

  .btn{
    background:#000;
    opacity:0.2;
    color:white;
  }

  ion-input{
    color:#FAFAFA;
  }

  ion-textarea{
    color:#FAFAFA;
  }

  ion-card{
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  ion-card-content{
    margin-left:-2%;
  }

  ion-item{
    width:50%;
  }

  .summ{
    color:#000;
  }

  ::placeholder {
    color: white;
    opacity: 1; /* Firefox */
  }

  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: white;
  }

  ::-ms-input-placeholder { /* Microsoft Edge */
    color: white;
  }

}

<br>
<ion-header>
  <ion-navbar>
    <ion-title>
      HybridSumm
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="bg">

  <ion-item class="bg-ions">
    <ion-label class="div-pai" color="primary" stacked>Title</ion-label>
    <ion-input placeholder="Ex: The Bio-informatics" style="color:white;"></ion-input>
  </ion-item>
  <br>
  <ion-item class="bg-ions">
    <ion-label color="primary" stacked >Text</ion-label>
    <ion-textarea placeholder="Place the text that you want to summarize." ngDefaultControl [(ngModel)]="test"></ion-textarea>
  </ion-item>
  <br>
  <button ion-button outline style="background: white">Summarize</button>
  <button ion-button>Test</button>

  <br><br>

  <ion-card>

    <ion-card-header>
      Card Header
    </ion-card-header>

    <ion-card-content>
      {{test}}
    </ion-card-content>

  </ion-card>




</ion-content>

Answer 1

Ionic默认情况下会设置一些属性，而覆盖它们的唯一方法是给它们指定！important规则。

也许这不是最佳实践，但它可行，而ionic并没有给我们提供很多无效的变量来覆盖某些内容。

它适用于我在您的代码中的以下SCSS规则中添加此代码：

  ion-card{
    display: flex;
    flex-direction: column;
    width: 100% !important;
    margin: 0 !important;
  }

我希望这个对你有用。