布局结构 - 带有angularjs md的卡片布局和工具栏

Question

如何使用AngularJS Material Design lib实现官方Layout structure guideline中描述的页面结构，并在下面的屏幕截图中举例说明？我想让集中卡破坏页面工具栏的边缘。 Codepen的例子将受到高度赞赏。

编辑：相关主题：Angular Material Design layout

Answer 1

我想我会发布这个来帮助其他人尝试使用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;
}

Answer 2

您可以使用一点CSS轻松完成此操作

.card_position{
    margin-top:-70px
}

将此类添加到卡元素中。