Question

我在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做到这一点，但是有些图像占用了很多空间并且看起来很糟糕

Answer 1

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

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

卡用MaterializeCSS和VUE跳过行

1 个答案: