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

Question

Simple issue, I've made a really basic page to play around with Angular Material. I have a button which is visible on medium-sized devices which toggles the side navigation, and for some reason it is full width. There is no CSS which is making it full width, and there are no Material directives which are making it full width. It seems to have inherited the width of the container it's in, but I can't see why.

Can anyone with a bit of Angular Material knowledge see why? (Just resize the window pane to see the button)

Here's my CodePen:

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

And the code:

<!-- 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 if this is undesired. The flex-direction of <div layout="column"> seems to be responsible for the behavior.

Answer 2

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

Answer 3

I just add the DIV tag to md-button with style property of width 100px

Its Work fine

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