Question

简单的问题，我已经制作了一个非常基本的页面来使用Angular Material。我有一个在中型设备上可见的按钮，可以切换侧面导航，由于某种原因，它是全宽的。没有CSS使其成为全宽度，并且没有使其成为全宽度的Material指令。它似乎继承了它所在容器的宽度，但我看不出原因。

任何有一点Angular Material知识的人都可以看到原因吗？（只需调整窗口大小以查看按钮）

这是我的CodePen：

http://codepen.io/anon/pen/jPYNzy

代码：

<!-- Container -->
<div layout="column" layout-fill>
    <div layout="row" flex>

        <!-- Content -->
        <md-content flex>

            <md-toolbar>
                <div class="md-toolbar-tools">
                    <h1>Title</h1>
                </div>
            </md-toolbar>

            <div layout="column" class="md-padding">
                <p>
                The left sidenav will 'lock open' on a medium (>=960px wide) device.
                </p>
                <md-button ng-click="toggleLeft()" hide-gt-md>
                    Toggle left
                </md-button>
            </div>

        </md-content><!-- ./Content -->

    </div>
</div><!-- ./Container -->

Answer 1

Just wrap it in another div如果这是不受欢迎的。 <div layout="column">的弯曲方向似乎是行为的原因。

Answer 2

除非另有说明，否则元素宽度默认为其容器的100％。

Answer 3

我只是将DIV标记添加到样式属性为宽度为100px

的md-button

工作正常

 <div style="text-align:center;">
                <md-button ng-click="toggleLeft()" hide-gt-md style="width:100px;">
                    Toggle left
        </md-button></div>

角度材料 - 为什么我的md按钮全宽？

3 个答案: