使网格列材料化溢出

Question

我正在尝试制作“产品”页面，每一列都有一张卡片，只有一行。

    <section>
            <div class="container">
                <div class="row">
                    <div class="col s12">
                        <h4 class="grey-text text-darken-4">
                            New Listings
                        </h4>
                    </div>
                </div>
                <div class="row">
                    <div class="col s6 m4 l3">
                        <div class="card hoverable">
                            <a href="">
                                <div class="card-image">
                                    <img src="https://source.unsplash.com/250x250/?mobile" alt="" />
                                </div>
                                <div class="card-content">
                                    <h6 class="truncate black-text"><b>Lorem</b></h6>
                                    <p class="truncate grey-text text-darken-2">Buy Lorem</p>
                                    <p class="right-align grey-text"><small>Today</small></p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col s6 m4 l3">
                        <div class="card hoverable">
                            <a href="">
                                <div class="card-image">
                                    <img src="https://source.unsplash.com/250x250/?mobile" alt="" />
                                </div>
                                <div class="card-content">
                                    <h6 class="truncate black-text"><b>Lorem</b></h6>
                                    <p class="truncate grey-text text-darken-2">Buy Lorem</p>
                                    <p class="right-align grey-text"><small>Today</small></p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col s6 m4 l3">
                        <div class="card hoverable">
                            <a href="">
                                <div class="card-image">
                                    <img src="https://source.unsplash.com/250x250/?mobile" alt="" />
                                </div>
                                <div class="card-content">
                                    <h6 class="truncate black-text"><b>Lorem</b></h6>
                                    <p class="truncate grey-text text-darken-2">Buy Lorem</p>
                                    <p class="right-align grey-text"><small>Today</small></p>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
    </section>

我的代码看起来像这样，即使有空间，一张卡也会从一行跳到另一行，我真的不知道出什么问题了

编辑：现在正在工作，为card div设置了“小”类。感谢肖恩。

Answer 1

将行材料化不能很好地处理不同高度的卡，在这种情况下，使用提供的三个类可以帮助固定卡的高度，以使卡的高度均匀：|

<div class="card small">
   <!-- Card Content -->
</div>
在卡上作为额外类别应用了三种尺寸-small，medium和large等于：