Html ECS中的卡工作不正常

我正试图用ECS中的卡片（卡片展示）显示内容。 参考：

我已经创建了三张卡片（一行三列）。它在网络视图（pc）中看起来不错。但在移动视图中，我只需要以较小的尺寸显示它，以使其适合精确的视口。但是，我不想在移动视图中多行显示这些卡片。我试过了。但是，这一切都是徒劳的。不知道我做错了什么

此外，当我单击卡片中的选项图标时，我看不到内容

以下是当前的结果：

我的代码：

 <div class="parallax-container" id="abc" style="height:auto">
        <div class="section">
            <div class="container">
                <div class="row center">
                    <h3 class="header col s12 white-text">Text</h3>
                </div>
                <div class="row">
                    <div class="col m4 s12">
                        <div class="card z-depth-4">
                            <div class="card-image">
                                <img class="activator" src="a.jpeg">
                            </div>
                            <div class="card-content">
                                <span class="card-title activator grey-text text-darken-4">Heading<i class="material-icons right">more_vert</i></span>
                                <p><a href="#">text</a></p>
                            </div>
                            <div class="card-reveal">
                                <span class="card-title grey-text text-darken-4">Heading<i class="material-icons right">close</i></span>
                                <p>Text</p>
                            </div>
                        </div>
                    </div>
                    <div class="col m4 s12">
                        <div class="card z-depth-4">
                            <div class="card-image">
                                <img class="activator" src="b.jpeg">
                            </div>
                            <div class="card-content">
                                <span class="card-title activator grey-text text-darken-4">Heading<i class="material-icons right">more_vert</i></span>
                                <p><a href="#">Text</a></p>
                            </div>
                            <div class="card-reveal">
                                <span class="card-title grey-text text-darken-4">Heading<i class="material-icons right">close</i></span>
                                <p>Text</p>
                            </div>
                        </div>
                    </div>
                    <div class="col m4 s12">
                        <div class="card z-depth-4">
                            <div class="card-image">
                                <img class="activator" src="c.jpeg">
                            </div>
                            <div class="card-content">
                                <span class="card-title activator grey-text text-darken-4">Heading<i class="material-icons right">more_vert</i></span>
                                <p><a href="#">Text</a></p>
                            </div>
                            <div class="card-reveal">
                                <span class="card-title grey-text text-darken-4">Heading<i class="material-icons right">close</i></span>
                                <p>Text</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="parallax cyan"></div>
    </div>

正文
头像

接近
正文

头像

接近
正文

头像

接近
正文

---

谢谢

您已经定义了s12，这意味着一行中的一张卡，即一张卡的整个宽度。设为s4，则一行将有3张卡，而不是多行，然后使用媒体查询为小屏幕设置样式。您可以选中更新的

code

---

对于媒体查询：

您已经定义了s12，这意味着一行中的一张卡，即一张卡的完整宽度。设为s4，则一行将有3张卡，而不是多行，然后使用媒体查询为小屏幕设置样式。您可以选中更新的

code

---

对于媒体查询：

此行为在使用jQuery 3和Materialize 0.100.2的干净代码笔中不可复制

正文
头像

接近
正文

头像

接近
正文

头像

接近
正文

在使用jQuery 3和Materialize 0.100.2的干净代码笔中，此行为是不可复制的

正文
头像

接近
正文

头像

接近
正文

头像

接近
正文

谢谢！你解决了30%的问题。我这样做没有媒体的质疑，我是不允许使用的。现在，看到这样的内容！好啊然后，您必须定义适合所有宽度的样式，即

<div class="parallax-container" id="abc" style="height:auto">
    <div class="section">
        <div class="container">
            <div class="row center">
                <h3 class="header col s12 white-text">Text</h3>
            </div>
            <div class="row">
                <div class="col m4 s12">
                    <div class="card z-depth-4">
                        <div class="card-image">
                            <img class="activator" src="a.jpeg">
                        </div>
                        <div class="card-content">
                            <span class="card-title activator grey-text text-darken-4">Heading<i class="material-icons right">more_vert</i></span>
                            <p><a href="#">text</a></p>
                        </div>
                        <div class="card-reveal">
                            <span class="card-title grey-text text-darken-4">Heading<i class="material-icons right">close</i></span>
                            <p>Text</p>
                        </div>
                    </div>
                </div>
                <div class="col m4 s12">
                    <div class="card z-depth-4">
                        <div class="card-image">
                            <img class="activator" src="b.jpeg">
                        </div>
                        <div class="card-content">
                            <span class="card-title activator grey-text text-darken-4">Heading<i class="material-icons right">more_vert</i></span>
                            <p><a href="#">Text</a></p>
                        </div>
                        <div class="card-reveal">
                            <span class="card-title grey-text text-darken-4">Heading<i class="material-icons right">close</i></span>
                            <p>Text</p>
                        </div>
                    </div>
                </div>
                <div class="col m4 s12">
                    <div class="card z-depth-4">
                        <div class="card-image">
                            <img class="activator" src="c.jpeg">
                        </div>
                        <div class="card-content">
                            <span class="card-title activator grey-text text-darken-4">Heading<i class="material-icons right">more_vert</i></span>
                            <p><a href="#">Text</a></p>
                        </div>
                        <div class="card-reveal">
                            <span class="card-title grey-text text-darken-4">Heading<i class="material-icons right">close</i></span>
                            <p>Text</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="parallax cyan"></div>
</div>