將離子卡嵌入離子載片中的寬度錯誤

Question

當使用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; 
    } 
    } 

} 

感謝所有幫助我能得到，安德烈

Answer 1

找到了解決自己.. 。

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

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

作爲在離子初學者，我認爲CSS文件從每一頁分開。所以我有這樣的代碼躺在其他頁面上，顯然影響了它。同時對css文件進行更改並不總是實時重新加載UI。