角材料FAB快速拨号在工具栏中已偏移

Question

我试图从有角度的材料站点中提出一些设计实例。 我使用Angular Material 1.0.0RC5。

我想像他们的示例https://material.angularjs.org/latest/demo/fabSpeedDial一样将FAB Speedial放置在工具栏中。

但是，当我应用代码时，我在页面上看到的内容也得到了一个奇怪的偏移量，我只能使用margin-top:-23px但是我认为我做错了什么。

我还可以看到Codepen示例中距站点的偏移量（如果超过某个大小）具有相同的错误

那我在做什么错？

下面我附上屏幕代码

<body ng-app="starterApp" layout="column" ng-controller="AppController as ac" ng-cloak>
    <md-toolbar>
        <div class="md-toolbar-tools">
            <h2>
                <span>Toolbar with Icon Buttons</span>
            </h2>
            <span flex></span>
        </div>
    </md-toolbar>
    <md-fab-speed-dial md-open="isOpen" md-direction="down" class="md-scale md-fab-top-right">
        <md-fab-trigger>
            <md-button aria-label="menu" class="md-fab md-warn">
                <md-icon md-svg-src="menu"></md-icon>
            </md-button>
        </md-fab-trigger>
        <md-fab-actions>
            <md-button aria-label="Twitter" class="md-fab md-raised md-mini">
                <md-icon md-svg-src="android" aria-label="Twitter"></md-icon>
            </md-button>
            <md-button aria-label="Facebook" class="md-fab md-raised md-mini">
                <md-icon md-svg-src="windows" aria-label="Facebook"></md-icon>
            </md-button>
        </md-fab-actions>
    </md-fab-speed-dial>
    <div layout="row" flex>
        <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-4dp" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
            <md-button class="md-accent">Button 1</md-button>
            <md-button class="md-accent">Button 2</md-button>
        </md-sidenav>
        <div layout="column" flex id="content">
            <md-content layout="column" flex class="md-padding">
                This Starter Application consists of a Toolbar, SideNav (with two buttons), and Content area.
                <p>This is the content area! </p>
            </md-content>
        </div>
    </div>

Answer 1

看看这支笔

我所做的就是将margin-top属性从89更改为16，现在一切正常，如果我明白您的意思的话

Answer 2

他们的作品有效但您的作品无效的原因是，他们的菜单栏上方还有另一个元素，因此他们添加了“ margin-top：89px;”。 和“ top：16px;” 补偿。

您需要做的只是调整他们设置的边距最高值。

.fabSpeedDialdemoMoreOptions md-fab-speed-dial {
  margin-top: 65px;
}

看这里

角材料FAB快速拨号在工具栏中已偏移

问题描述

2 个解决方案

解决方案1
1 2015-11-27 08:57:33

解决方案2
1 2015-11-27 09:00:28

角材料FAB快速拨号在工具栏中已偏移

问题描述

2 个解决方案

解决方案1 1 2015-11-27 08:57:33

解决方案2 1 2015-11-27 09:00:28

解决方案1
1 2015-11-27 08:57:33

解决方案2
1 2015-11-27 09:00:28