Ionic 2：从表单元素中删除巨大的填充

Question

Q) 我有以下页面网格结构，我想删除所有内容周围的填充，这样它就不会那么大。有没有一种很好的方法可以做到这一点，并且不会破坏开箱即用的所有 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>

看起来像这样：

谢谢。

Answer 1

尝试在 app.variables.scss 文件中为网格兄弟提供覆盖..

$grid-padding-width: 期望值（通常默认为 10）。

也看看 - https://github.com/ionic-team/ionic/blob/master/src/components/grid/grid.scss 希望对你有帮助。

Answer 2

如果您不想以全局方式覆盖样式，只需向相关元素添加 no-padding 属性 <ion-grid no-padding>...

Safari Elements screen shot

Ionic 2：从表单元素中删除巨大的填充

Ionic 2: Remove gigantic padding from form elements

css

padding

styling

ionic2

angular