从离子布局中删除右边距/填充答案

【问题标题】：Remove right margin / padding from ionic layout从离子布局中删除右边距/填充
【发布时间】：2018-10-30 22:09:45
【问题描述】：

您好，我刚刚重新安装了 ionic，实际上只是在学习它，但是当我在浏览器中加载它时，我看到了一些我不喜欢的东西。

似乎有一个我无法摆脱的右边距，我已经尝试过，但似乎没有任何效果。如何删除它？

这是我的html：

<ion-header>   <ion-navbar primary>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Welcome, Person</ion-title>   </ion-navbar> </ion-header>

<ion-content class="no-padding no-margin">

    <ion-grid class="data-table no-padding no-margin">
      <ion-row class="header no-padding no-margin">
        <ion-col justify-content-center padding>
          <span class="label">
              <span class="text col">Customer</span>
              <span class="col">
                <img src="assets/imgs/up-down-arrows.png" class="icon" />
            </span>
          </span>
        </ion-col>
        <ion-col justify-content-center padding>
            <span class="label">
                <span class="text col">Invoice #</span>
                <span class="col">
                  <img src="assets/imgs/up-down-arrows.png" class="icon" />
              </span>
            </span>
        </ion-col>
        <ion-col justify-content-center padding>
            <span class="label">
                <span class="text col">Type</span>
                <span class="col">
                  <img src="assets/imgs/up-down-arrows.png" class="icon" />
              </span>
            </span>
        </ion-col>
        <ion-col justify-content-center padding>
            <span class="label">
                <span class="text col">Amount</span>
                <span class="col">
                  <img src="assets/imgs/up-down-arrows.png" class="icon" />
              </span>
            </span>
        </ion-col>
        <ion-col justify-content-center padding>
            <span class="label">
                <span class="text col">Method</span>
                <span class="col">
                  <img src="assets/imgs/up-down-arrows.png" class="icon" />
              </span>
            </span>
        </ion-col>
        <ion-col justify-content-center padding>
            <span class="label">
                <span class="text col">No. of Tickets</span>
                <span class="col">
                  <img src="assets/imgs/up-down-arrows.png" class="icon" />
              </span>
            </span>
        </ion-col>
        <ion-col justify-content-center padding>
            <span class="label">
                <span class="text col">Date &amp; Time</span>
                <span class="col">
                  <img src="assets/imgs/up-down-arrows.png" class="icon" />
              </span>
            </span>
        </ion-col>
      </ion-row>
    </ion-grid>

  <h3>Ionic Menu Starter</h3>

  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way.   </p>

  <button ion-button secondary menuToggle>Toggle Menu</button> </ion-content>

这是一个全新的 ionic 安装，所以在我添加自定义 CSS 之前就是这样。

【问题讨论】：

它实际上是一个全新的 ionic 安装，所以在我添加任何 html 或 css 之前就是这样，即使在取出我的 css 之后它仍然存在。
离子版本 3.20.0
试过了，没用，很奇怪。
刚刚确认只有在我使用电脑浏览器时是这样，而不是在移动设备上。
好吧，经过研究，我终于明白那个空间是为滚动条设计的，还是我错了？

标签： ionic-framework ionic3

【解决方案1】：

我有一个类似的问题，<ion-card></ion-card> 有左右边距，当我设置no-margin 时没有帮助，然后我检查了Overriding Ionic Varialbles 现在问题解决了，你可以自己检查网站并执行你的修改。

// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here
$card-ios-margin-left: 0;
$card-ios-margin-right: 0;



// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here
$card-md-margin-left: 0;
$card-md-margin-right: 0;



// App Windows Variables
// --------------------------------------------------
// Windows only Sass variables can go here
$card-wp-margin-left: 0;
$card-wp-margin-right: 0;

见附图，左边是原图ion-card，右边是有设置的（黑色部分是手机边框）。

【讨论】：

【解决方案2】：

如果您想从父级继承自定义填充，则无法实现它：

<ion-content no-padding>

如果你必须使用 ion-card 试试这个 css：

width: 100% !important;
margin: 0 !important;
padding: 0 !important;

【讨论】：