Angular Material - 为啥我的 md 按钮是全角的？

Posted 2023-03-06

【中文标题】Angular Material - 为啥我的 md 按钮是全角的？

【英文标题】：Angular Material - Why is my md-button full-width?Angular Material - 为什么我的 md 按钮是全角的？

【发布时间】：2015-09-12 22:02:12

【问题描述】：

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

【问题讨论】：

我没有看到任何按钮

@Sajeetharan 正如我在帖子中提到的，该按钮可在md 设备上查看。

这就是它是全角的原因。 hide-gt-md 设置最小宽度和最大宽度。

@miyamoto 是的，我看到min-width 是88px，但是任何地方都没有max-width，只有width 设置。

我说错了。它似乎来自<div layout="column"> flex。删除 -webkit-flex-direction: column（我在 Chrome 上）将其与文本内联并以“常规”大小显示。

【参考方案1】：

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

【参考方案2】：

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

【讨论】：

我认为这不是一个好的解决方案，这非常依赖于按钮内部的文本，并且不可重复使用。

确定内部文本的依赖关系。添加属性为“min-width：100px”和百分比宽度。它可以解决问题...希望对您有所帮助

它有效，但不是一个好的解决方案。默认情况下，按钮应该取决于它的内容。您可以看到我为更可重用的解决方案选择的上述答案。

【参考方案3】：

Just wrap it in another div 如果不希望这样做。 <div layout="column"> 的 flex-direction 似乎是造成这种行为的原因。

【讨论】：

太棒了，谢谢！因此，当它进入div column 时，它几乎将按钮视为一整列，但当它包裹在另一个 div 中时，它会将 div 视为列，将按钮视为常规按钮......对吗？我希望我已经说清楚了！

是的，基本上我认为。我自己对此有点模糊，但layout 属性将div 变成了一个弹性容器，它的直接子项变成了弹性项目。来自layout="column" 的flex-direction 表示它们正在堆叠（然后在水平方向“弯曲”？？）。将按钮包裹在另一个 div 中意味着 div 是直接子项和弹性项目。

很好的解释老兄。我理解你所说的，但 Angular Material 肯定需要一本包含所有这些术语的字典，其中包含 1 个句子描述。文档中的很多示例只是图像或 CodePens，并不能很好地解释理论。

这不是 angular-material 独有的，它只是 css。我必须阅读这些，但仍然不是 100% 幕后发生的事情。 scotch.io/tutorials/a-visual-guide-to-css3-flexbox-propertiescss-tricks.com/snippets/css/a-guide-to-flexbox

我之前已经通读过这篇文章并尝试过使用 flexbox（不是 angular-material），但它与标准引导程序/基础样式网格系统及其工作方式完全不同。我认为我会再读一遍那篇文章。