Materialisecss 中的卡片无法正常工作答案

【问题标题】：Cards in Materializecss is not working properlyMaterialisecss 中的卡片无法正常工作
【发布时间】：2018-06-12 00:05:42
【问题描述】：

我正在尝试使用 materializecss 中的卡片（卡片显示）显示内容。参考：http://materializecss.com/cards.html

我创建了三张卡片（1 行 3 列）。它在网络视图（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>

谢谢！

【问题讨论】：

标签： html css responsive-design material-design materialize

【解决方案1】：

您已定义 s12 表示一排的一张卡片，即一张卡片将占用完整的宽度。将其设为 s4，然后一行将有 3 张卡片而不是多行，然后使用媒体查询为小屏幕制作样式。您可以查看更新的 code here

媒体查询：reference

【讨论】：

谢谢！你解决了 30% 的问题。我没有媒体查询就做到了，我不允许使用。现在，看到这样的内容！ imgur.com/sEFUFas
好的。然后你必须定义适合所有宽度的样式，即在手机、平板电脑和桌面上。做一些像字体大小随着屏幕尺寸减小而减小的事情，像这样
问题是标题文本“text”（图片中）无缘无故地向下移动了一半。字体大小也可以和之前的一样。

【解决方案2】：

在使用 jQuery 3 和 Materialize 0.100.2 的干净代码笔中无法重现此行为。

https://codepen.io/anon/pen/GyvgKV

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

【讨论】：