html - Materializecss 中的卡片无法正常工作

Question

我正在尝试使用来自 materializecss 的卡片(卡片显示)显示内容。引用:http://materializecss.com/cards.html

我创建了三张卡片(1 行 3 列)。它在 WebView (PC)中看起来不错。但在移动 View 中，我只需要以小尺寸显示它以使其适合确切的视口(viewport)。但是，我不想在移动 View 中以多行显示这些卡片。我尝试过这个。但是，徒劳无功。不知道我做错了什么？

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

这是当前的结果:

我的代码:

 <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>

谢谢!

Answer 1

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

媒体查询:reference