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

简单的问题，我已经做了一个非常基本的页面来处理棱角材料。我有一个按钮，可以在中型设备上看到，它可以切换侧面导航，出于某种原因，它是全宽的。没有CSS使其全宽，也没有材料指令使其全宽。它似乎继承了它所在容器的宽度，但我不明白为什么

有一点角度材料知识的人能明白为什么吗？（只需调整窗格大小即可看到按钮）

这是我的密码笔：

以及守则：

<!-- 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 -->

标题

左侧导航将在中等（>=960px宽）设备上“锁定打开”。

向左切换

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

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

它的工作很好

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

向左切换

如果这是不需要的。

的弹性方向似乎是造成这种行为的原因。

我看不到任何原因button@Sajeetharan这个按钮可以在

md

设备上看到，正如我在文章中提到的。这就是为什么它是全宽的

hide gt md

设置最小宽度和最大宽度。@miyamoto是的，我看到

min width

是

88px

，但是没有

max width

任何地方，只是一个

width

设置。我弄错了。它似乎来自flex。删除

-webkit flex direction:column

（我在Chrome上）与文本内联显示，大小为“常规”。我认为这不是一个好的解决方案，它非常依赖于按钮内的文本，不可重复使用。确定内部文本的依赖性。添加属性为“最小宽度：100px”，宽度以百分比表示。它确实起作用了。。。希望它能起到帮助作用，但这不是一个好的解决方案。默认情况下，按钮应取决于其内容。你可以看到上面的答案，我选择了一个更可重用的解决方案。真棒，谢谢！因此，当它进入

div列时，它几乎将按钮视为整个列，但当它被包装在另一个div中时，它将div视为列，将按钮视为常规按钮……对吗？我希望我已经说清楚了！是的，基本上我认为。我自己对此有点模糊，但是
layout
属性将
div
转换为flex容器，其直接子项转换为flex项。来自
layout=“column”
的
flex direction
表示它们正在堆叠（然后在水平方向上“弯曲”）。将按钮包装在另一个
div
中意味着
div
是直接子项和弹性项。很好的解释，伙计。我理解你所说的，但Angular Material肯定需要一本包含所有这些术语的字典，其中有一句话的描述。文档中的很多例子都是图像或代码笔，它们不能很好地解释这个理论。这不是角材料所独有的，只是css。我不得不读这些，但仍然不是100%的幕后故事。我以前读过这篇文章，并尝试过使用flexbox（不是角度材质），但它的逻辑与标准引导/基础样式的网格系统及其工作方式截然不同。我想我会再读一读那篇文章。