CSS 在 materializecss 中更改卡片视图的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32805419/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change size of card-view in materializecss
提问by imGaurav
I am using materializecss framework , I want to know that how I can change the size of the components in that , For example I am using hoverable card view and I want to resize its width to 400px , Here's the code I was using
我正在使用 materializecss 框架，我想知道如何更改组件的大小，例如我使用可悬停的卡片视图，我想将其宽度调整为 400px，这是我使用的代码
<div class="card hoverable small">
<div class="card-image">
<img src="images/sample-1.jpg">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>This is simple card.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
</div>
</div>
`
`
回答by Amit singh
If you want the cardto have 400pxwidth in whole of your project than
如果你想card有400px宽度在整个项目比
Add
添加
.card {
width:400px;
}
OR
或者
If you want the cardto have 400pxwidth only if you want to use whenever you want than give a class to the cardlike i have given in the snippet and add the css
如果您希望只有在您想在任何时候使用时才card具有400px宽度，而不是给card我在代码段中给出的类似的类并添加 css
.card-small {
width:400px;
}
Check the snippet..
检查片段..
.card-small {
width: 400px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.css" rel="stylesheet" />
<div class="card hoverable small card-small">
<div class="card-image">
<img src="images/sample-1.jpg">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>This is simple card.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
</div>
</div>回答by imGaurav
it is a advisable that in responsive layout you should use percentage instead of pixels but if you want to use width :400px you can use following code.
建议在响应式布局中您应该使用百分比而不是像素，但如果您想使用宽度：400px，您可以使用以下代码。
just see the screen resolution at which you want the width of card to be 400px and put that resolution in media query as shown below with your card width class.
只需查看您希望卡片宽度为 400 像素的屏幕分辨率，并将该分辨率放入媒体查询中，如下所示，使用您的卡片宽度类。
in this example i have shown initial width is 800px then when my resolution comes to 767px media query will change the width to 400px and it will remain till resolution is 480 px then again on 480 it will change the width from 400 to 100px as written in media query.
在这个例子中，我已经显示初始宽度是 800px 然后当我的分辨率达到 767px 媒体查询将宽度更改为 400px 并将保持直到分辨率为 480 px 然后再次在 480 它将宽度从 400 更改为 100px 如写入媒体查询。
.card { width:800px;}
@media only screen
and (max-width : 480px) {
.card { width:100px;}
}
@media only screen
and (max-width : 767px) {
.card { width:400px;}
}
