Question

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

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

谢谢！

Answer 1

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

对于媒体查询：reference

Answer 2

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

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>

Materialisecss中的卡片无法正常工作

2 个答案: