Question

您好我刚刚完成了一个新的离子安装，实际上只是学习它然而当我加载它我的浏览器时，我看到了一些我不喜欢的东西。

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

这是我的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>

这是一个新的离子安装，所以在我添加自定义css之前就是这样。

Answer 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，右侧是有设置的（黑色部分是电话框架）。

Answer 2

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

<ion-content no-padding>

如果您要使用离子卡，请尝试以下CSS：

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

从离子布局中移除右边距/填充

2 个答案: