如何调整离子卡的长度？

Question

好吧，我想将宽度标准化为上面的宽度，但我没有任何办法......我已经尝试过边距，宽度和其他，但是 none 如果你想改变卡的大小。我想保留默认值，你推荐我一些命令还是我做错了？我执行的所有 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 规则。

这可能不是最佳实践，但它确实有效，并且 ionic 没有给我们太多 sass 变量来覆盖一些东西。

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

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

希望对你有用。

如何调整离子卡的长度？

How can I resize the length of an card in ionic?

ionic-framework

ionic2

ionic3