ionic-framework - 如何在 ionic 中调整卡片的长度？

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 默认设置了一些属性，覆盖它们的唯一方法是给它们 !重要 规则。

这可能不是最佳实践，但它有效，而且 ionic 给我们提供了很少的 sass 变量来覆盖某些东西。

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

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

我希望这个对你有用。