Question

这是我的HTML

<md-tab-group>
  <md-tab>
    <template md-tab-label>One</template>
    <template md-tab-content>
      <md-content class="md-padding">
        <h1 class="md-display-2">Tab One</h1>
      </md-content>
    </template>
  </md-tab>
  <md-tab>
    <template md-tab-label>Two</template>
    <template md-tab-content>
      <md-content class="md-padding">
        <h1 class="md-display-2">Tab Two</h1>
      </md-content>
    </template>
  </md-tab>
</md-tab-group>

这需要在桌面和移动设备上使用全宽，在桌面和中心对齐时，要以50％宽度呈现的内容需要进行哪些更改？

Answer 1

这是所有HTML，而且您没有显示您使用样式（CSS）所做的事情。

使用bootstrap，你可以添加以下两个类＆＃34; col-md-6 col-offset-md-3＆＃34;会做你想要的。像这样：

<md-tab-group class="col-md-6 col-offset-md-3">
  <md-tab>
    <template md-tab-label>One</template>
    <template md-tab-content>
      <md-content class="md-padding">
        <h1 class="md-display-2">Tab One</h1>
      </md-content>
    </template>
  </md-tab>
  <md-tab>
    <template md-tab-label>Two</template>
    <template md-tab-content>
      <md-content class="md-padding">
        <h1 class="md-display-2">Tab Two</h1>
      </md-content>
    </template>
  </md-tab>
</md-tab-group>

角度材料2 - 如何使宽度减小的中心对齐

1 个答案: