Materialisecss中的卡片无法正常工作

时间:2018-01-02 09:19:47

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

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

我创建了三张牌(1行3列)。它在Web视图(pc)中看起来很好。但是在移动视图中,我只需要以小尺寸显示它以使其适合精确的视口。但是,我不想在移动视图中将这些卡显示在多行中。我尝试过这个。但是,徒劳无功。不知道我做错了什么?

另外,当我点击卡片中的选项图标时,我看不到内容。

这是当前的结果:

enter image description here

我的代码:

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

谢谢!

2 个答案:

答案 0 :(得分:2)

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

对于媒体查询:reference

答案 1 :(得分:0)

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