将离子卡嵌入离子载片中的宽度错误

问题描述：

当使用ion-slides时，我遇到了布局问题。我使用的HTML代码来创建一个简单的卡片：将离子卡嵌入离子载片中的宽度错误

<ion-header> 
    <ion-navbar> 
     <ion-title style="text-align:center;">Title</ion-title> 
    </ion-navbar> 
</ion-header> 
<ion-content class="tutorial-page"> 

    <ion-card> 
    <ion-card-content> 
     <ion-card-title style="color:#000000;text-align:center;padding-top:10px; font-size: 24px; font-weight: bold;"> 
     Title 
     </ion-card-title> 
    </ion-card-content> 

    </ion-card> 

</ion-content>

这理所当然地导致了这一点： Correct display of card

但是当我尝试在ion-slides嵌入该卡的宽度很奇怪。它在景观上看起来很好，看起来像有一些固定的宽度。我不知道如何使它在肖像中工作。代码在这里：

<ion-header> 
    <ion-navbar> 
     <ion-title style="text-align:center;">Title</ion-title> 
    </ion-navbar> 
</ion-header> 
<ion-content class="tutorial-page"> 

    <ion-slides> 
    <ion-slide> 
     <ion-card> 
     <ion-card-content> 
      <ion-card-title style="color:#000000;text-align:center;padding-top:10px; font-size: 24px; font-weight: bold;"> 
      Title 
      </ion-card-title> 
     </ion-card-content> 

     </ion-card> 
    </ion-slide> 
    </ion-slides> 

</ion-content>

结果是这样的： Strange width

此处的CSS：

.tutorial-page { 

    .toolbar-background { 
    background: #fff; 
    border-color: transparent; 
    } 

    .slide-zoom { 
    width: 100%; 
    height: 100%; 
    } 

    .slide-title { 
    margin-top: 2.8rem; 
    } 

    .slide-image { 
    max-height: 50%; 
    max-width: 60%; 
    margin: 18px 0; 
    } 

    b { 
    font-weight: 500; 
    } 

    p { 
    padding: 0 40px; 
    font-size: 14px; 
    line-height: 1.5; 
    color: #60646B; 

    b { 
     color: #000000; 
    } 
    } 

}

感谢所有帮助我能得到，安德烈

答

找到了解决自己.. 。

I曾在一些CSS文件中的一些片段：

.swiper-container { 
    width: 600px; 
    height: 300px; 
}

作为在离子初学者，我认为CSS文件从每一页分开。所以我有这样的代码躺在其他页面上，显然影响了它。同时对css文件进行更改并不总是实时重新加载UI。

将离子卡嵌入离子载片中的宽度错误

相关推荐