佈局結構 - 卡片佈局和工具欄與angularjs md

Question

如何使用AngularJS Material Design lib實現頁面結構，如官方Layout structure guideline中所述，並在下面的屏幕截圖中進行了說明？我想要集中卡片打破頁面工具欄的邊緣。 Codepen的例子將不勝感激。

編輯：相關話題：Angular Material Design layout

Answer 1

您可以輕鬆地做到這一點用一點CSS

.card_position{ 
    margin-top:-70px 
} 

這個類添加到卡元件。

Answer 2

我想我會發布這個來幫助別人試圖用Materialise CSS做同樣的事情。您可以更改導航欄的高度以及卡的大小/位置。

Demo

HTML

<nav> 
    <div class="nav-wrapper"> 
     <a href="#" class="brand-logo left"><i class="material-icons">list</i></a> 
    </div> 
    <div class="nav-wrapper"> 
    </div> 
</nav> 
< 
<<div class="row" id="card-placement"> <!-- id added here --> 
    <div class="col s12 m8 offset-m2"> 
     <div class="card grey lighten-5"> 
      <div class="card-content grey-text text-darken-1"> 
       <h5 class="head">Title</h5> <!-- class added here --> 
       <div class="divider"></div> 
       &nbsp; 
        <p>Stuff goes here</p> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

/* Moves card up into navbar */ 
#card-placement{ 
    margin-top:-60px 
} 
/* Moves Title position up to be level with nav bottom */ 
.head { 
margin-top: -2px; 
} 

nav { 
    color: #fff; 
    background-color: #ee6e73; 
    width: 100%; 
    height: 112px; 
    line-height: 56px; 
} 

.nav-wrapper { 
    margin-left: 20px; 
}