Angular Material-为什么我的md按钮是全宽的

Angular Material - Why is my md-button full-width?

本文关键字：按钮 md Material- 为什么 我的 Angular      更新时间：2023-09-26

简单的问题是，我制作了一个非常基本的页面来处理Angular Material。我有一个在中型设备上可见的按钮，可以切换侧面导航，出于某种原因，它是全宽的。没有使其全宽的CSS，也没有使其全宽的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 -->

如果不需要，只需将其包装在另一个div中即可。<div layout="column">的弯曲方向似乎是造成这种行为的原因。

除非另有指定，否则元素宽度默认为其容器的100%。

我只是将div标记添加到md按钮，样式属性为宽度100px

它的工作精细

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