角度材质设计布局=“行”内容与窗口重叠

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

他们试图在他们可用的任何空间进行调整，并且不尊重他们需要最小空间的事实，在你的情况下恰好比提供的屏幕宽度更大。因此，如果你想要它们伸展你需要为它们提供更多空间，这可能是下一行（即你需要提供包装）或者你需要提供一个水平滚动。