如何调整离子卡的长度？

Question

好吧，我想将宽度标准化为上面的宽度，但我没有任何办法...我已经尝试了边距，宽度和其他，但如果你想改变卡的大小，则没有。我想保留默认值，你推荐我一些命令还是我做错了？我所做的所有css命令都在home.scss中，谢谢大家。

Watch the print of my app here

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 规则。

这可能不是最好的做法，但它有效，而离子给了我们很多sass变量来覆盖一些东西。

我可以在您的代码中添加以下SCSS规则：

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

我希望它适合你。