Materializecss卡片功能异常及移动端布局问题求助

我来帮你搞定这两个常见的Materialize卡片组件小问题，咱们一个个拆解：

1. 实现移动端卡片单行横向滚动（不换行） #

你原本用的col m4 s12在小屏幕（<600px）下会让每个卡片占满整行，自然会换行。要实现移动端单行显示，需要调整布局逻辑：

• 给包裹卡片的row添加横向滚动和禁止换行的样式
• 把小屏幕的列宽从s12改成xs4（Materialize的xs对应超小屏，4列刚好让3张卡片占满一行）
• 给卡片列添加flex-shrink: 0防止被压缩变形

2. 修复Card Reveal点击无响应的问题 #

Materialize的Card Reveal是依赖JavaScript的交互组件，大概率是你没初始化组件或者没正确引入依赖文件：

• 必须先引入jQuery，再引入Materialize的JS文件（Materialize依赖jQuery）
• 在DOM加载完成后调用初始化方法，激活卡片的交互功能

修改后的完整代码 #

<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 card-scroll-row">
        <!-- 调整小屏幕列宽为xs4 -->
        <div class="col m4 xs4">
          <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 xs4">
          <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 xs4">
          <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>

<!-- 引入依赖JS，放在body末尾 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
  // 初始化组件
  $(document).ready(function(){
    $('.card').card();
    $('.parallax').parallax(); // 顺便初始化视差组件
  });
</script>

<!-- 自定义CSS，最好放在单独的样式文件里 -->
<style>
  .card-scroll-row {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 1rem; /* 给滚动条留出空间 */
  }
  .card-scroll-row .col {
    flex-shrink: 0; /* 防止卡片被压缩 */
  }
</style>

额外注意事项 #

• 检查图片路径是否正确，图片加载失败可能间接影响交互体验
• 如果还是有问题，打开浏览器控制台查看JS报错，通常是依赖文件未加载成功导致的
• 横向滚动的样式可以根据需求调整，比如添加自定义滚动条美化

内容的提问来源于stack exchange，提问作者aadhira