在 materializecss 中更改卡片视图的大小

Question

我正在使用 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>

`

Answer 1

如果您希望 card 在整个项目中具有 400px 宽度而不是

添加

.card {
 width:400px;
}

或

如果你想让 card 有 400px 宽度，只要你想随时使用，而不是像我给的那样给 card 一个 class在代码段中添加 css

.card-small {
     width:400px;
    }

检查代码段..

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

Answer 2

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

只需查看您希望卡片宽度为 400px 的屏幕分辨率，然后将该分辨率与您的卡片宽度一起放入媒体查询中，如下所示 class。

在这个例子中，我已经显示初始宽度是 800px，然后当我的分辨率达到 767px 时，媒体查询会将宽度更改为 400px，并且它将一直保持到分辨率为 480px，然后再次在 480 上它将宽度从 400 更改到 100 像素，如媒体查询中所写。

.card { width:800px;}



@media only screen
and (max-width : 480px) {
.card { width:100px;}
}


@media only screen
and (max-width : 767px) {
.card { width:400px;}
}

在 materializecss 中更改卡片视图的大小

change size of card-view in materializecss

css

user-interface

materialize

web