MD卡沒有采取全寬

我想創建一個表格，將使用MD卡充分的寬度。MD卡沒有采取全寬

<md-card> 
    <md-card-content> 
    <h2>Settings</h2> 
    <section class="form-section"> 
     <md-slide-toggle>Toggle Theme</md-slide-toggle> 
    </section> 
    </md-card-content> 
</md-card>

相關的CSS

.form-section{ 
    display: flex; 
    align-content:center; 
    align-items: center; 
    height: 100%; 
}

它出現像

我都想設置形式將出現在頁面或MD卡的中間應充分寬度。

我使用角2角材質2.請幫

來源

2017-09-06 Ashish

我讀到MD卡文檔，似乎沒有被任何交代，將採取全寬。 https://material.angularjs.org/latest/api/directive/mdCard –

需要爲了適用MD-卡類，而不是在內部元素，使其100％ –

@WasifKhan你看AngularJS材料docs，**不** ** Material2文件。該文檔是在這裏：https://material.angular.io/components/card/api – Edric

在組件的CSS定義CSS類：

.full-card { 
    width: 100%; /* or try width: 100vw; */ 
}

應用這個類到你的卡：

<md-card class="full-card"> 
    <md-card-content> 
     <h2>Settings</h2> 
     <section class="form-section"> 
      <md-slide-toggle>Toggle Theme</md-slide-toggle> 
     </section> 
    </md-card-content> 
</md-card>

來源

2017-09-06 05:38:00 Faisal

100％寬度不起作用 – Ashish

分享圍繞卡片的HTML代碼。 – Faisal

這是對齊項：中心是從填充柔性容器停止卡。如果您刪除並將摺疊方向設置爲列，它將拉伸至全寬。

 <div class="form-section"> 
      <md-card> 
       <md-card-content> 
        <h2>Settings</h2> 
        <section class="form-section"> 
         <md-slide-toggle>Toggle Theme</md-slide-toggle> 
        </section> 
       </md-card-content> 
      </md-card> 
     </div>

CSS

.form-section { 
     display: flex; 
     flex-direction: column; 
     align-content:center; 
     height: 100%; 
    }

來源

2017-09-06 07:13:15 JayChase

它沒有工作 – Ashish

@Ashish怪必須有應用了一些其他的造型。你能分享你的完整的HTML和CSS？ – JayChase

MD卡沒有采取全寬

回答

相關問題