md-card没有占全宽

Question

我正在尝试创建一个使用md-card进行全宽度的表单。

<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-card应该占据整个宽度。

我正在使用Angular 2和Angular Material 2.请帮助

Answer 1

在组件中定义一个css类：css：

commandShP

将此课程应用于您的卡片：

API_URL

Answer 2

align-items：center 阻止卡片填充Flex容器。如果将其移除并将弯曲方向设置为列，则会拉伸到最大宽度。

        <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%;
    }