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

时间:2015-06-26 04:24:53

标签: javascript css angularjs material-design angular-material

简单的问题,我已经制作了一个非常基本的页面来使用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 -->

3 个答案:

答案 0 :(得分:19)

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

答案 1 :(得分:1)

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

答案 2 :(得分:-1)

我只是将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>