在materializecss中更改card-view的大小

Question

我正在使用materializecss框架，我想知道如何更改组件的大小，例如我使用的是hoverable卡视图，我想将其宽度调整为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>

`

Answer 1

如果您希望card在整个项目中的宽度为400px，而不是

添加

.card {
 width:400px;
}

或

如果您希望card仅在您想要随时使用时使用400px宽度，而不是像我在代码段中给出的card类，并添加CSS

.card-small {
     width:400px;
    }

检查摘录..

＆＃13;

＆＃13;

.card-small {
  width: 400px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

建议您在响应式布局中使用百分比而不是像素，但如果您想使用宽度：400px，则可以使用以下代码。

只需查看您希望卡片宽度为400px的屏幕分辨率，并将该分辨率放入媒体查询中，如下所示，使用您的卡片宽度等级。

在这个例子中我已经显示初始宽度是800px然后当我的分辨率达到767px时媒体查询会将宽度更改为400px并且它将保持到分辨率为480像素然后再次在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;}
}