Angular Material 设计布局="row" 内容与 window 重叠

Question

这是我的 HTML

<div id="someId">
    <div layout="column" layout-padding>
        <h3 class="someClass" align="center">Week 2</h3>
        <div layout="row"  style="outline: 1px solid red">

            <!-- <div ng-repeat="doge in Doges">
                // contents
            </div> -->

        </div>
    </div>
</div>

产生这个：红色轮廓是浏览器的实际宽度。为什么第 5 项通过它而不是下一行？

Answer 1

其实我只是 layout-wrap 到 <div layout="row" style="outline: 1px solid red"> 它会自动包装内容。

<div id="someId">
    <div layout="column" layout-padding>
        <h3 class="someClass" align="center">Week 2</h3>
        <div layout="row" layout-wrap  style="outline: 1px solid red">

            <!-- <div ng-repeat="doge in Doges">
                // contents
            </div> -->
        </div>
    </div>
</div>

Answer 2

他们试图根据他们可用的任何 space 进行调整，并且不尊重他们需要的最小值 space 这一事实，在您的情况下恰好大于所提供的屏幕宽度.因此，如果您希望它们伸展开来，您需要为它们提供更多 space，这可以是下一行（即您需要提供环绕）或者您需要提供水平滚动。

Angular Material 设计布局="row" 内容与 window 重叠

Angular Material Design layout="row" contents are overlapping the window

html

css

angularjs

angular-material