离子2:从表单元素中删除巨大的填充

Dav*_*ave 3 css padding styling ionic2 angular

问)我有以下页面网格结构,我想删除所有内容的填充,以便它不是那么大.有没有一种很好的方法来做到这一点,不会破坏所有的Ionic风格的开箱即用?

这是结构:

<ion-content>
  <ion-row baseline>
    <ion-col width-90>
      <ion-item>
        <ion-label stacked>Email</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
    </ion-col>
    <ion-col width-10>
      <ion-icon name='more'></ion-icon>
    </ion-col>
  </ion-row>
  <ion-row baseline>
    <ion-col width-90>
      <ion-item>
        <ion-label stacked>Floor</ion-label>
        <ion-select item-right>
          <ion-option value="nes">NES</ion-option>
          <ion-option value="n64">Nintendo64</ion-option>
          <ion-option value="ps">PlayStation</ion-option>
          <ion-option value="genesis">Sega Genesis</ion-option>
          <ion-option value="saturn">Sega Saturn</ion-option>
          <ion-option value="snes">SNES</ion-option>
        </ion-select>
      </ion-item>
    </ion-col>
    <ion-col width-10>
      <ion-icon name='more'></ion-icon>
    </ion-col>
  </ion-row>
</ion-content>
Run Code Online (Sandbox Code Playgroud)

看起来像这样:

在此输入图像描述

谢谢.

小智 6

尝试将app.variables.scss文件中的覆盖提供给网格兄弟.

$ grid-padding-width:期望值(默认情况下通常为10).

另外看看 - https://github.com/ionic-team/ionic/blob/master/src/components/grid/grid.scss 希望这对你有所帮助.