卡片使用 MaterializeCSS 和 VUE 跳过行答案

【问题标题】：Cards skip line with MaterializeCSS and VUE卡片使用 MaterializeCSS 和 VUE 跳过行
【发布时间】：2019-04-30 03:13:14
【问题描述】：

我正在显示有关 MateralizeCSS 卡的信息，但我想在中型到大型设备上并排显示它们，但在使用 V_FOR 时它们会一个接一个地显示，我不明白原因：

你能帮帮我吗？

根据我必须显示 3 张卡，然后为班级显示 1 张：col s12 m4 但它在任何分辨率下都显示一张在另一张之上

   <div class="row">
          <div class="col s12 m4" v-for="item in services" :key="item.id">
          <div v-for="inside in item.servicios" :key="inside.name">
            <div class="card" v-if="item.id === serviceId">
              <div class="card-content">
                <img class="responsive-img" :src="require(`../assets/img/services/${inside.img}`)">
                <h3>Lavandería</h3>
              </div>
              <div class="card-action">
                <a href="#">This is a link</a>
                <a href="#">This is a link</a>
              </div>
            </div>
          </div>
        </div>
    </div>

附上它们的显示方式：

我也试过用 Flexbox 来做，但是有些图片占用了很多空间而且看起来很糟糕

【问题讨论】：

标签： css materialize

【解决方案1】：

您需要将所有卡片放在一行中 - 每张卡片不是 1 行。行是块级项目，因此它们将开始一个新行。我替换了图像并将您的卡片标记（以 .col 开头）复制了 3 次：

https://codepen.io/doughballs/pen/rNVyaBR?editors=1010

<div class="row">

          <!-- Card 1 -->
          <div class="col s12 m4" v-for="item in services" :key="item.id">
          <div v-for="inside in item.servicios" :key="inside.name">
            <div class="card" v-if="item.id === serviceId">
              <div class="card-content">
                <img class="responsive-img" src="https://cdn.mos.cms.futurecdn.net/ntFmJUZ8tw3ULD3tkBaAtf-650-80.jpg">
                <h3>Lavandería</h3>
              </div>
              <div class="card-action">
                <a href="#">This is a link</a>
                <a href="#">This is a link</a>
              </div>
            </div>
          </div>
        </div>

  <!-- Card 2 -->
  <div class="col s12 m4" v-for="item in services" :key="item.id">
          <div v-for="inside in item.servicios" :key="inside.name">
            <div class="card" v-if="item.id === serviceId">
              <div class="card-content">
                <img class="responsive-img" src="https://cdn.mos.cms.futurecdn.net/ntFmJUZ8tw3ULD3tkBaAtf-650-80.jpg">
                <h3>Lavandería</h3>
              </div>
              <div class="card-action">
                <a href="#">This is a link</a>
                <a href="#">This is a link</a>
              </div>
            </div>
          </div>
        </div>

  <!-- Card 3 -->
  <div class="col s12 m4" v-for="item in services" :key="item.id">
          <div v-for="inside in item.servicios" :key="inside.name">
            <div class="card" v-if="item.id === serviceId">
              <div class="card-content">
                <img class="responsive-img" src="https://cdn.mos.cms.futurecdn.net/ntFmJUZ8tw3ULD3tkBaAtf-650-80.jpg">
                <h3>Lavandería</h3>
              </div>
              <div class="card-action">
                <a href="#">This is a link</a>
                <a href="#">This is a link</a>
              </div>
            </div>
          </div>
        </div>

</div>

https://materializecss.com/cards.html

【讨论】：